React JS中如何处理输入选择的更改值？

Question

我正在尝试构建表单。

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

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

这是提交表单后execute的方法（我使用调度执行我的动作）：

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里面，我有一个form看起来像这样：（我使用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

> name和isactive正常工作。但是dataId的值只是一个空字符串""。我只是想将[const { data } = this.props;中的_ id设置为state中value的dataId。

我正在尝试构建表单。我有一个class扩展React.Component，它包含一个像这样的构造函数：Constructor（props）{super（props）; this.state = {name：``，dataId：''，...

Answer 1

我注意到您已经使用了Input和大写字母I，这似乎是一个自定义组件。我认为您的[[大写输入组件可能不一定与小写选项组件配对。