如何在填写所有输入字段之前禁用表单提交按钮？！ ReactJS ES2015

Question

您好，我为单个字段表单找到了答案...但是如果我们有一个包含多个字段的表单怎么办？

如果您有 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>
  }
})

Answer 1

这是表单验证的基本设置：

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>
  }
})

在更复杂的设置中，您可能希望将每个输入字段放在单独的组件中。并使代码更干燥（注意更改处理程序中的重复）。
还有各种反应形式的解决方案，比如here。

Answer 2

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

我不会在每个 onChange 处理程序中设置 submitDisabled，而是挂钩到生命周期方法以监听更改。
确切地说是componentWillUpdate(nextProps, nextState)。在每次更改组件之前调用此方法 - 道具更改或状态更改。在这里，您可以验证您的表单数据并设置您需要的标志 - 所有这些都在一个地方。
代码示例：

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

完整的工作小提琴https://jsfiddle.net/4emdsb28/

Answer 3

当且仅当我的输入元素的所有状态均为true 的所有输入字段都已填充时，我将通过仅渲染普通按钮元素来做到这一点。否则，它将呈现一个禁用的按钮。

下面是一个结合 useState 钩子并使用 if 语句创建组件 SubmitButton 的示例。

import React, { useState } from 'react';

export function App() {
  const [firstname, setFirstname] = useState('');
  const [lastname, setLastname] = useState('');
  const [email, setEmail] = useState('');
    
  function SubmitButton(){
    if (firstname && lastname && email){
      return <button type="button">Button</button>
    } else {
      return <button type="button" disabled>Button</button>
    };
  };

  return (
    <div>
      <input value={email} onChange={ e => setEmail(e.target.value)}/>
      <input value={firstname} onChange={ e => setFirstname(e.target.value)}/>
      <input value={lastname} onChange={ e => setLastname(e.target.value)}/>
      <SubmitButton/>
    </div>
  );
};

Answer 4

这可能会有所帮助。 （学分 - https://goshakkk.name/form-recipe-disable-submit-button-react/）

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);

Answer 5

  export default function SignUpForm() {

    const [firstName, onChangeFirstName] = useState("");
    const [lastName, onChangeLastName] = useState("");
    const [phoneNumber, onChangePhoneNumber] = useState("");

    const areAllFieldsFilled = (firstName != "") && (lastName != "") && (phoneNumber != "")

    return (
      <Button
        title="SUBMIT"
        disabled={!areAllFieldsFilled}
        onPress={() => {
          signIn()
        }
        }
      />
    )
    }

与 Shafie Mukhre 的方法类似！