Question

我有一个有状态的组件，我正在尝试使用map来渲染一些无状态组件（每个组件都有文本输入）。

主要问题是，当我将文字输入输入时，我收到的undefined为event.target。我想问题是当前的背景。我试图调试，但我没有更多的想法如何解决这个问题。

父组件：

handleUpdateInput = (name) => {
  this.setState({ [name]: event.target.value }) // event.target = undefined
}

renderAdvancedOptions(fields) {
  return fields.map(field => {
    const { id, name } = field;

    return (
      <AdvancedOption
        key={id}
        name={name}
        inputValue={this.state[name]}
        handleUpdateInput={this.handleUpdateInput}
      />
    );
  });
}

子组件：

const AdvancedOption = ({ name, inputValue, handleUpdateInput }) => {
  return (
    <input
      name={name}
      onChange={() => handleUpdateInput(name)}
      value={inputValue}
      type="text"
    />
  );
};

export default AdvancedOption;

Answer 1

在您的父组件handleUpdateInput中，您需要为要传递的事件添加另一个参数。

handleUpdateInput = (name, event) => {
  this.setState({ [name]: event.target.value }) // event.target = undefined
}

否则该函数不知道event是什么。

在输入内部，您需要将事件传递给函数

onChange={(e) => handleUpdateInput(name, e)}

查看有关如何创建受控输入的react文档： https://facebook.github.io/react/docs/forms.html#controlled-components

希望有所帮助！

在文本输入更改时未收到已接收的event.value

1 个答案: