Question

我有一系列问题正在获取并添加到状态中，看起来像这样：

iPhone 6 - 11.4

然后根据问题类型

进行渲染

<TextView
android:id="@+id/textview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />

我正在使用material-ui。

当用户提交表单时，获取用户在这些输入中输入的数据的最佳方法是什么？

我想不出一个简单的方法来完成它。是否存在在提交表单时从表单获取所有数据的功能？

Answer 1

React最惯用的方法是使用父组件的状态来存储表单值。在处理提交事件期间，您可以轻松访问它。

// class method
onChange = e => this.setState({
  [e.target.name]: e.target.type === 'checkbox'
    ? e.target.checked
    : e.target.value,
});

// somewhere in render
<TextField onChange={this.onChange} margin="dense" id="name" type="email" fullWidth />
...
<Checkbox
  checked={this.state.jason}
  onChange={this.onChange}
  color="primary"
  value={option}
  name={question.title}
  onClick={this.handleCheckBox(option, question, index)}
/>

Answer 2

已更新onChange上的状态。调用一个函数并传递问题对象。然后设置状态。您的状态将始终与表单保持最新，提交时只需获取当前状态

ReactJS：从表单获取数据

2 个答案: