Javascript 如何禁用表单提交按钮，直到所有输入字段都填写完毕？！反应JS ES2015

嗨，我找到了一个单一字段表单的答案。。。但是如果我们有一个有多个字段的表单呢

如果您有1个字段，则可以禁用它，但如果您希望基于多个字段禁用它，则该选项不起作用：

getInitialState() {
    return {email: ''}
  },
  handleChange(e) {
    this.setState({email: e.target.value})
  },
  render() {
    return <div>
      <input name="email" value={this.state.email} onChange={this.handleChange}/>
      <button type="button" disabled={!this.state.email}>Button</button>
    </div>
  }
})

getInitialState（）{
返回{电子邮件：'}
},
手变（e）{
this.setState（{email:e.target.value}）
},
render（）{
返回
按钮
}
})

以下是表单验证的基本设置：

getInitialState() {
    return {
      email: '',
      text: '',
      emailValid: false,         // valid flags for each field
      textValid: false, 
      submitDisabled: true       // separate flag for submit
    }
  },
  handleChangeEmail(e) {         // separate handler for each field
    let emailValid = e.target.value ? true : false;        // basic email validation
    let submitValid = this.state.textValid && emailvalid   // validate total form
    this.setState({
      email: e.target.value
      emailValid: emailValid, 
      submitDisabled: !submitValid
    })
  },
  handleChangeText(e) {         // separate handler for each field
    let textValid = e.target.value ? true : false;        // basic text validation
    let submitValid = this.state.emailValid && textvalid   // validate total form
    this.setState({
      text: '',
      textValid: textValid, 
      submitDisabled: !submitValid
    })
  },
  render() {
    return <div>
      <input name="email" value={this.state.email} onChange={this.handleChangeEmail}/>
      <input name="text" value={this.state.text} onChange={this.handleChangeText}/>
      <button type="button" disabled={this.state.submitDisabled}>Button</button>
    </div>
  }
})

getInitialState（）{
返回{
电子邮件：“”，
文本：“”，
emailValid:false，//每个字段的有效标志
textValid:false，
submitDisabled:true//提交的单独标志
}
},
handleChangeEmail（e）{//每个字段都有单独的处理程序
让emailValid=e.target.value？true:false；//基本电子邮件验证
让submitValid=this.state.textValid&&emailvalid//验证总表单
这是我的国家({
电子邮件：e.target.value
emailValid:emailValid，
SubmitSabled:！submitValid
})
},
handleChangeText（e）{//每个字段都有单独的处理程序
让textValid=e.target.value？true:false；//基本文本验证
让submitValid=this.state.emailValid&&textvalid//验证总表单
这是我的国家({
文本：“”，
textValid:textValid，
SubmitSabled:！submitValid
})
},
render（）{
返回
按钮
}
})

在更复杂的设置中，您可能希望将每个输入字段放在单独的组件中。并使代码更加干燥（注意更改处理程序中的重复）。

---

也有各种各样的反应形式的解决方案，比如。

我在这里会采取一些不同的方式

我不会在每一个

onChange

处理程序中设置

submitDisabled

，而是挂接到lifecycle方法来监听更改。
准确地说，组件将更新（nextrops，nextState）。此方法在对组件的每次更改之前被调用-道具更改或状态更改。在这里，您可以验证表单数据并设置所需的标志-全部放在一个位置。
代码示例：

componentWillUpdate(nextProps, nextState) {
  nextState.invalidData = !(nextState.email && nextState.password);
},

---

完全工作的fiddle

这是我如何做到的，当且仅当所有输入字段都已填充且输入元素的所有状态均为

true

时，才渲染普通按钮元素。否则，它将呈现一个禁用的按钮

下面是一个合并useState钩子并使用if语句创建组件

SubmitButton

的示例

import React，{useState}来自“React”；
导出函数App（）{
const[firstname，setFirstname]=useState（“”）；
const[lastname，setLastname]=useState（“”）；
const[email，setEmail]=useState（“”）；
函数SubmitButton（）{
if（firstname&&lastname&&email）{
返回按钮
}否则{
返回按钮
};
};
返回(
setEmail（e.target.value）}/>
setFirstname（e.target.value）}/>
setLastname（e.target.value）}/>
);
};

这可能会有所帮助。（学分-）

从“React”导入React；
从“react dom”导入react dom；
类注册表单扩展了React.Component{
构造函数（）{
超级（）；
此.state={
电邮：“，
密码：“
};
}
handleEmailChange=evt=>{
this.setState（{email:evt.target.value}）；
};
handlePasswordChange=evt=>{
this.setState（{密码：evt.target.value}）；
};
handleSubmit=（）=>{
const{email，password}=this.state；
警报（`Signed with email:${email}密码：${password}`）；
};
render（）{
const{email，password}=this.state；
const isEnabled=email.length>0&&password.length>0；
返回(
注册
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

我不知道如何反应，但我想您可以在state对象中添加一个

isSubmitAllowed

，并在按钮的

disabled

属性中引用它。然后，

isSubmitAllowed

将实现测试表单是否完整所需的任何逻辑。完全取决于所讨论的特定表单。没有什么能阻止你为每个按钮设置一个标志。我认为最简单、最可靠的方法是在渲染方法中计算它。为清楚起见，您可以在

return

语句之前的单独一行上计算，例如

const canSubmit=…

，并将

disabled={！canSubmit}

设置为按钮的道具。设置得不错！您可能在说明中也指

componentWillUpdate（）

。（

componentWillMount（）

不接受任何参数），您可能需要另一个生命周期事件进行初始验证。

import React from "react";
import ReactDOM from "react-dom";

class SignUpForm extends React.Component {
  constructor() {
    super();
    this.state = {
      email: "",
      password: ""
    };
  }

  handleEmailChange = evt => {
    this.setState({ email: evt.target.value });
  };

  handlePasswordChange = evt => {
    this.setState({ password: evt.target.value });
  };

  handleSubmit = () => {
    const { email, password } = this.state;
    alert(`Signed up with email: ${email} password: ${password}`);
  };

  render() {
    const { email, password } = this.state;
    const isEnabled = email.length > 0 && password.length > 0;
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          placeholder="Enter email"
          value={this.state.email}
          onChange={this.handleEmailChange}
        />
        <input
          type="password"
          placeholder="Enter password"
          value={this.state.password}
          onChange={this.handlePasswordChange}
        />
        <button disabled={!isEnabled}>Sign up</button>
      </form>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<SignUpForm />, rootElement);