Question

我在一个页面视图中有多个数字类型输入。如果我在一个输入中输入一个数字，所有输入的值都会改变。我只有一个状态值，我将输入中的变量分配给它。如何只控制目标所在的输入？

家长：

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

孩子的孩子：

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

Answer 1

您需要创建一个组件 (TrComponent) 来呈现 tr 标记和子项。
在 TrComponent 中，您创建一个状态调用 value 并处理更改以更新此状态
要处理 onClick 中的 TrComponent，您可以像这样更新：onClick={() => props.onClick(values_you_want)}

Answer 2

首先将 value 状态更改为对象

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"
/>

处理多个数字类型输入

2 个答案: