Reactjs 处理多个数字类型输入

我在一个页面视图中有几个数字类型输入。如果我在一个输入中输入一个数字，则所有输入的值都会更改。状态中只有一个值，我从输入中为其分配变量。如何仅控制目标所在的输入

家长：

class App extends Component {
  state = {
    starships: [],
    value: 0,
    quantity: 0,
  };

  handleInputChange = (e) => {
    this.setState({
      value: e.target.value,
    });
  };


  render() {
    const { starships, value, quantity } = this.state;
    
    return (
      <>
        <Header quantity={quantity} />
        <StarshipsList
          starships={starships}
          value={value}
          quantity={quantity}
          onChange={this.handleInputChange}
          onClick={this.handleAddBtn}
        />
      </>
    );
  }
}

类应用程序扩展组件{
状态={
星际飞船：[]，
值：0，
数量：0，
};
handleInputChange=（e）=>{
这是我的国家({
价值：即目标价值，
});
};
render（）{
const{starships，value，quantity}=this.state；
返回(
);
}
}

孩子的孩子：

function Starship(props) {
  return (
    <tbody>
      {props.starships.map(({ url, name, manufacturer, cost_in_credits }) => (
        <tr key={url}>
          <td>{name}</td>
          <td>{manufacturer}</td>
          <td>{cost_in_credits}</td>
          <td>
            <input
              onChange={props.onChange}
              value={props.value}
              className="input"
              type="number"
              min="0"
            />
            <button onClick={props.onClick} className="add-btn">
              Add
            </button>
          </td>
        </tr>
      ))}
    </tbody>
  );
}

功能星际飞船（道具）{
返回(
{props.starships.map（{url，name，manufacturer，cost_in_credits}）=>(
{name}
{制造商}
{成本（单位：学分）}
添加
))}
);
}

• 您需要创建一个组件（

  TrComponent

  ）来呈现

  tr

  标记和子项
• 在

  TrComponent

  中，创建一个状态调用

  value

  ，并处理更改以更新此状态
• 要在

  TrComponent

  中处理

  onClick

  ，您可以像这样更新：

  onClick={（）=>props.onClick（您想要的值）}

---

首先将

值更改为对象的状态

state = {
    starships: [],
    value: {},
    quantity: 0,
  };

现在将
handleInputChange
函数更改为接受
value
和
key

 handleInputChange = (key, value) => {
    this.setState({
      value[key]: value,
    });
  };

现在在
Starship
组件中，我们将调用
onChange
方法，其中
url
作为键，
e.target.value
作为值：

<input
  onChange={(e) => props.onChange(url, e.target.value)}
  value={props.value[url]}
  className="input"
  type="number"
  min="0"
/>

props.onChange（url，e.target.value）}
value={props.value[url]}
className=“输入”
type=“编号”
min=“0”
/>
您希望所有输入都有一个值，还是每个输入都有一个值？每个星际飞船都有自己的状态（带有一个值和onChange处理程序）。只需将该输入提取到一个单独的有状态组件中。