如何修复 React Component 的绑定从 Parent 到 Children

Question

我想用setState更新ParentComponent中State的值。所以我定义了一个 handleChange 和一个 handleSubmit 函数，然后我将它们传递给 Children 组件表单输入。我像这样绑定它并且在 Children 组件输入上，我不能输入超过 1 个字符。状态总是在每个角色之后更新。我认为我的绑定有问题，请帮助我。

我通过多种方式绑定到 Children 但它不起作用，并且在 Children 组件输入上，我不能输入超过 1 个字符。状态总是在每个字符后更新。

handleChange = (event) => {
  this.setState({
    user:{
      ...this.state.user,
        [event.target.name] : event.target.value
      } 
    }) 
}

传递给 Child:

<route.component handleSubmit = {this.handleSubmit.bind(this)} handleChange = {this.handleChange.bind(this)} {...props} {...this.state} />

和 Child 组件：

const SignInForm = ({handleChange,handleSubmit}) =>(

  <ListGroup>
    <ListGroupItem className="p-3">
      <Row>
        <Col>
          <Form >
            <Row form>
              <Col md="6" className="form-group">
                <label htmlFor="feEmailAddress">Email: </label>
                <FormInput
                  onChange = {evt=>handleChange(evt)}
                  id="feEmailAddress"
                  type="email"
                  name ='email'
                  placeholder="Email"
                />
              </Col>
              <Col md="6">
                <label htmlFor="fePassword">Password :</label>
                <FormInput
                onChange = {evt=>handleChange(evt)}
                  id="fePassword"
                  type="password"
                  name = "password"
                  placeholder="Password"
                />
              </Col>
            </Row>
            <Button onClick = {(evt)=>handleSubmit(evt)}>Log In</Button>
          </Form>
        </Col>
      </Row>
    </ListGroupItem>
  </ListGroup>
)

我希望同时更新值用户名和密码，请帮助我。

Answer 1

您正确传递了处理程序但未传递值，因此它不会在每次笔画后更新。

   const SignInForm = ({handleChange, handleSubmit, email}) =>(
     ...
   )

                <FormInput
                  value={email}
                  onChange = {evt=>handleChange(evt)}
                  id="feEmailAddress"
                  type="email"
                  name ='email'
                  placeholder="Email"
                />

P.S.: 处理程序的绑定应该在组件的构造函数中完成，而不是在 render 方法中完成。

见https://reactjs.org/docs/handling-events.html

如何修复 React Component 的绑定从 Parent 到 Children

How to fix the binding of React Component from Parent to Children

input

reactjs

react-props