如何处理 React JS 中输入 select 的变化值？

Question

我正在尝试构建一个表单。

我有一个 Class extends React.Component，其中包含这样一个 constructor：

constructor(props) {
    super(props);
    this.state = {
      name: '',
      dataId: '',
      isactive: '',
    };
    this.handleCreateChange = this.handleCreateChange.bind(this);
}

这是表单提交后执行的方法
（我使用 dispatch 来执行我的操作）：

doCreateTarif = e => {
    e.preventDefault();
    let postData = {
      name: this.state.name,
      dataId: this.state.dataId,
      isactive: this.state.isactive,
    };
    console.log(postData);
    this.props.dispatch(createData(postData))
};

此方法可以处理所有 input 变化：

handleCreateChange = e => {
    const target = e.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
};

在 render() 函数中，在 return 之前，我声明：

const { data } = this.props;

结构 data 来自 props 看起来像这样：

data = [
  {
    _id: "a1G23e25vaus6DVa7Sv",
    volume: 100,
  },
  {
    _id: "e1D23f25vaus6ASa7saA",
    volume: 100,
  },
]

在 return 中，我有一个表单，如下所示：
（我使用 reactstrap 这就是为什么我的标签是这样的：<Form>、<CustomInput/> 等）：

<Form onSubmit={this.doCreateTarif}>
<CustomInput
  onChange={this.handleCreateChange}
  type="switch"
  id="exampleIsActive"
  name="isactive"
  label="Turn on this if True"
/>
<Input
  onChange={this.handleCreateChange}
  type="text"
  name="name"
  id="exampleNama"
  placeholder="Nama"
/>
<Input onChange={this.handleCreateChange} type="select" name="dataId" id="exampleSelect">
  {
    data.map(item => {
      return (
        <option value={item._id}>{item.volume}</option>
      )
    })
  }
</Input>
<Button color="warning" className="px-5" type="submit">
  Create
</Button>
</Form>

这是 console.log(this.state) 的结果：

name: "ad"
dataId: ""
isactive: true

state name 和 isactive 的值工作正常。
但是 dataId 的值只是一个空字符串，"".
我只想将 _id 从 const { data } = this.props; 设置为 value of dataId in state.

Answer 1

我注意到你用的是Input，大写的I，好像是自定义组件。我认为您的大写输入组件可能不一定与小写选项组件配对。

或者您可以尝试将您的 onchange 回调和名称放在所有这些选项组件上。

或者您的下拉列表是否有自定义的 Select 组件？

对于受控组件，value 属性和 onChange 回调都在 input/select 元素上设置。查看这些组件如何用于 React：the select & option pair

如何处理 React JS 中输入 select 的变化值？

How handle change value of input select in React JS?

javascript

reactjs

reactstrap