Question

我正在努力弄清楚我们应该如何处理在React中提交表单。第一次用户，到目前为止都很难。

表单中的数据始终为空，表示json也为空。

据我所知，我读过的所有例子都应该有效。

我的组件是一个简单的注册组件：

def search_smallest(A):
  left, right = 0, len(A) - 1 
  while left < right:
    mid = (left + right) // 2
    if A[mid] > A[right]:
      left = mid + 1 
    else:
      right = mid 
  return left

如何将表单中的值转换为json数据？

Answer 1

您需要将value添加到FormControl，以便让它知道要呈现的值。

添加onChange以让它知道DOM输入更改时该怎么做。在这里，我们更新state.email值，以便FormControl将收到新的value道具，并使用更新后的电子邮件重新发送。您可以对其他输入执行相同操作。

我们还添加name道具，其值为event.target.name，以了解要更新的字段，因此我们不必为每个输入创建重复的句柄功能。

public constructor(props, context) {
    super(props, context);
    this.state = {}
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleEmailChange = this.handleChange.bind(this);
}

public handleChange (event) {
    this.setState({ [event.target.name]: event.target.value });
}

public handleSubmit() {
    console.log(this.state); // Your json data is here
}

public render() {

        return <Form horizontal onSubmit={this.handleSubmit} id={'reg-form'}>
                   <FormGroup controlId="formHEmail">
                       <Col componentClass={ControlLabel} sm={2}>
                           Email
                       </Col>
                       <Col sm={10}>
                           <FormControl
                               type="email"
                               name="email"
                               placeholder="Email" />
                               value={this.state.email}
                               onChange={this.handleChange}
                       </Col>
                   </FormGroup>
               </Form>
        }
    }
}

React表单提交 - 字段始终为空

1 个答案: