Question

我是Reactjs的新手。所以，我不知道我在做什么错。所以，我有一个父组件，它有一个表单和一个子组件。父组件具有用于表单的某些字段，子组件具有很少的字段。子组件的状态在父组件中定义，并且它作为prop传递给它。因此，在子组件中，我具有“电子邮件”，“密码”，“确认密码”字段和“提交”按钮。在这里，我需要实现的是，当用户为“密码”和“确认密码”字段输入相同的值时，“提交”按钮将启用。如果他提供了不同的值，则应禁用“提交”按钮。请查看我的代码以清楚地了解它。

预先感谢

import React, { Component } from 'react';
import FormPartTwo from './FormPartTwo';

 class Form extends Component {
     constructor(props){
         super(props);
         this.state = {
             FirstName: "",
             LastName: "",
             Email: "",
             Password: "",
             ConfirmPassword: ""
         }
     }

     handleChange = e =>{
         this.setState({
            [e.target.name]: e.target.value
         })

     }

     handleClick = e => {
        e.preventDefault();
        console.log(this.state);
     }
  render() {
    return (
      <div>
          <input 
            type = "text" 
            name = "FirstName" 
            placeholder="First Name"
            value = {this.state.FirstName}
            onChange = {this.handleChange}
            />
            <input 
            type = "text" 
            name = "LastName" 
            placeholder="Last Name"
            value = {this.state.LastName}
            onChange = {this.handleChange}
            />
            <FormPartTwo handleClick={this.handleClick} doChange={this.handleChange} {...this.props}/>
      </div>
    )
  }
}

export default Form


/---Component Two---/

import React, { Component } from 'react'

class FormPartTwo extends Component {
  render() {
    return (
      <div>
        <input 
           type="email"
           name="Email"
           value={this.props.Email}
           placeholder="Email"
           onChange={this.props.doChange}
           />
           <input 
           type="password"
           name="Password"
           placeholder="Password"
           value={this.props.Password}
           onChange={this.props.doChange}
           />
           <input 
           type="password"
           name="ConfirmPassword"
           placeholder="Retype Password"
           value={this.props.ConfirmPassword}
           onChange={this.props.doChange}
           />

           <input
           type="submit"
           disabled = {this.props.Password ==! this.props.ConfirmPassword}
           onClick={e => this.props.handleClick(e)}
           />

      </div>
    )
  }
}

export default FormPartTwo

Answer 1

问题是您在UITextView组件中使用了输入值（例如this.props.Password，this.props.ConfirmPassword等），而没有实际将它们传递给组件。 FormPartTwo。

您应该做的就是像这样将这些值传递到道具的<FormPartTwo handleClick={this.handleClick} doChange={this.handleChange} {...this.props}/>组件中。

FormPartTwo

然后在// Form.js <FormPartTwo {...this.props} handleClick={this.handleClick} doChange={this.handleChange} {...this.state} />组件中，您可以创建检查变量，以确定是否应禁用“提交”按钮。

FormPartTwo

这是工作example的链接。希望这会有所帮助！

当两个字段的值不相等时，禁用“提交按钮”。 React.js

1 个答案: