reactjs - 如何在 useState 中使用数组？

Question

我正在为矩阵计算构建一个简单的应用程序，因为矩阵需要 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

欢迎修改问题！

标签： reactjs

Answer 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>
  );
}