#reactjs
#reactjs
Вопрос:
Я создаю простое приложение для вычисления матрицы, поскольку для матрицы требуется 9 значений, поэтому мне нужно 9 состояний для хранения значений и цели вычисления
Использование 9 состояний очень длительное, как мне использовать одно состояние и создать внутри него массив и сохранить значение, подобное значению 9 состояний
позволяет использовать 9 состояний, использовать 9 обработчиков для функции onchange
Поскольку значение не может быть нулевым, мы не можем создать пустой массив, например
const [values,setValues] = useState([])
Короче говоря, как мне сократить этот код, как мне использовать циклы для минимизации кода, поскольку для нас важен каждый ввод???????
import React, { useState } from 'react'
function Add() {
const [value1, setValue1] = useState(0)
const [value2, setValue2] = useState(0)
const [value3, setValue3] = useState(0)
const [value4, setValue4] = useState(0)
const [value5, setValue5] = useState(0)
const [value6, setValue6] = useState(0)
const [value7, setValue7] = useState(0)
const [value8, setValue8] = useState(0)
const [value9, setValue9] = useState(0)
const [solution, setSolution] = useState(null)
const changeHandler1 = (e) => {
setValue1(e.target.value)
console.log("handler", value1, value2, value3, value4, value5, value6, value7, value8, value9)
}
const changeHandler2 = (e) => {
setValue2(e.target.value)
console.log("handler", value1, value2, value3, value4, value5, value6, value7, value8, value9)
}
const changeHandler3 = (e) => {
setValue3(e.target.value)
console.log("handler", value1, value2, value3, value4, value5, value6, value7, value8, value9)
}
const changeHandler4 = (e) => {
setValue4(e.target.value)
console.log("handler", value1, value2, value3, value4, value5, value6, value7, value8, value9)
}
const changeHandler5 = (e) => {
setValue5(e.target.value)
console.log("handler", value1, value2, value3, value4, value5, value6, value7, value8, value9)
}
const changeHandler6 = (e) => {
setValue6(e.target.value)
console.log("handler", value1, value2, value3, value4, value5, value6, value7, value8, value9)
}
const changeHandler7 = (e) => {
setValue7(e.target.value)
console.log("handler", value1, value2, value3, value4, value5, value6, value7, value8, value9)
}
const changeHandler8 = (e) => {
setValue8(e.target.value)
console.log("handler", value1, value2, value3, value4, value5, value6, value7, value8, value9)
}
const changeHandler9 = (e) => {
setValue9(e.target.value)
console.log("handler", value1, value2, value3, value4, value5, value6, value7, value8, value9)
}
const solveHandler = () => {
let sub1 = value5 * value9 - value8 * value6
let sub2 = value4 * value9 - value7 * value6
let sub3 = value4 * value8 - value5 * value7
let answer = (value1 * sub1) - (value2 * sub2) (value3 * sub3)
setSolution(answer)
}
return (
<div>{console.log("return", value1, value2, value3, value4, value5, value6, value7, value8, value9)}
< input type="text" onChange={changeHandler1} value={value1} />
< input type="text" onChange={changeHandler2} value={value2} />
< input type="text" onChange={changeHandler3} value={value3} />
<br />
< input type="text" onChange={changeHandler4} value={value4} />
< input type="text" onChange={changeHandler5} value={value5} />
< input type="text" onChange={changeHandler6} value={value6} />
<br />
< input type="text" onChange={changeHandler7} value={value7} />
< input type="text" onChange={changeHandler8} value={value8} />
< input type="text" onChange={changeHandler9} value={value9} />
<br />
<br />
<button onClick={solveHandler} >solve</button>
<p>Answer : {solution}</p>
</div>
)
}
export default Add изменения в вопросе приветствуются!
Ответ №1:
Вместо этого используйте массив. Матрица обычно представлена в виде массива на языках.
function Add() {
const [matrix, setMatrix] = React.useState(Array.from({ length: 8 }).fill(0));
const [solution, setSolution] = useState(null);
return (
<div>
{matrix.map((num, idx) => {
const onChange = e => {
const newMatrix = [...matrix];
newMatrix[idx] = Number(e.target.value);
setMatrix(newMatrix);
};
return <input type="text" onChange={onChange} value={num} />;
})}
<button onClick={solveHandler}>solve</button>
<p>Answer : {solution}</p>
</div>
);
}
Ответ №2:
Вы можете использовать useReducer hook. Например.
const initialValues = {};
for (let i = 0; i < 9; i ) {
initialValues[i] = 0;
}
const [values, setValues] = useReducer(
(state, newState) => ({ ...state, ...newState }),
initialValues
);
const changeHandler = (e) => {
setValues({ [e.target.name]: e.target.value });
};
return (
<>
{Object.entries(values).map(([k, v]) => (
<input name={k} type="text" onChange={changeHandler} value={v} />
))}
<button onClick={solveHandler}>solve</button>
<p>Answer: {solution}</p>
</>
);
В этом случае useReducer будет работать аналогично setState, обновляя только заданное значение.
Ответ №3:
Я написал такой код.
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [values, setValues] = useState([0, 0, 0, 0, 0, 0, 0, 0, 0]);
const [solution, setSolution] = useState(null);
const handlerFun = (event, index) => {
console.log(index);
console.log(event);
let temp = [...values];
temp[index] = event.target.value;
setValues(temp);
};
const solveHandler = () => {
let sub1 = values[4] * values[8] - values[7] * values[5];
let sub2 = values[3] * values[8] - values[6] * values[6];
let sub3 = values[3] * values[7] - values[4] * values[6];
let answer = values[0] * sub1 - values[1] * sub2 values[2] * sub3;
setSolution(answer);
};
return (
<div className="App">
{values.map((x, index) => {
return (
<>
<div>
{" "}
<input
type="text"
onChange={(event) => {
handlerFun(event, index);
}}
value={x}
/>
</div>
<span> {(index 1) % 3 === 0 ? <br /> : ""}</span>
</>
);
})}
<br />
<br />
<button onClick={solveHandler}>solve</button>
<p>Answer : {solution}</p>
</div>
);
}
Рабочая демонстрация
