禁用提交按钮，当两个字段值不相等时 |反应

Question

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

提前致谢

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

问题是您在 FormPartTwo 组件中使用了输入值（例如 this.props.Password、this.props.ConfirmPassword、...），而没有实际将它们传递到组件中。 <FormPartTwo handleClick={this.handleClick} doChange={this.handleChange} {...this.props}/>.

你应该做的是把这个值传递给props中的FormPartTwo组件，像这样。

// Form.js

<FormPartTwo 
  {...this.props}
  handleClick={this.handleClick} 
  doChange={this.handleChange}
  {...this.state}
/>

然后在FormPartTwo 组件中，您可以创建检查变量是否应禁用提交按钮。

// FormPartTwo.js

render () {
  const isSubmitDisabled =
    !this.props.Password ||
    !this.props.ConfirmPassword ||
    this.props.Password !== this.props.ConfirmPassword;

  return (
    ...
    <input
      type="submit"
      disabled={isSubmitDisabled}
      onClick={e => this.props.handleClick(e)}
    />
    ...
  )
}

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