reactjs - 在 React.js 中选择下拉值时如何启用按钮？

Question

我仅在从表单的下拉列表中选择一个国家/地区后才尝试启用该按钮。默认情况下禁用表单上的第一个值。我将如何在这里定义它？谢谢你。

const initialState = {
            username: "",
            password: "",
            email: "",
            firstname: "",
            lastname: "",
            country: "",
            checked: false,
            usernameError: "",
            passwordError: "",
            emailError: "",
            firstnameError: "",
            lastnameError: "",
            countryError: "",
            checkedError: false,
}

render() {
    const options = map(CountryList, (val) =>
        <option key={val} value={val}>{val}</option>
    );
    const enabled =  (this.state.username.length > 0 &&
    this.state.password.length > 0 &&
    this.state.email.length > 0 &&
    this.state.firstname.length > 0 &&
    this.state.lastname.length > 0 &&
    this.state.country.value == !disabled &&
    this.state.checked === true);

    <div className="form-group">
          <label className="control-label">Country</label>
          <select
                name="country"
                className="browser-default"
                value={this.state.country}
                onChange={this.onChange}
          >
                <option value="" disabled>Choose</option>
                {options}
          </select>
                <div className="errorMessage">
                    {this.state.countryError}
                </div>
     </div>

标签： reactjs

Answer 1

希望您需要在表单填满后启用提交按钮。

检查下面的代码，一旦填写表格，它将启用一个按钮。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        email: '',
        password: '',
        invalidData: true,
         name: [
        { label: 'India', value: 'India' },
        { label: 'China', value: 'China' },
        { label: 'Canada', value: 'Canada' }
      ],
      showbutton: false,
      country: ''
    }
    this.onEmailChange = this.onEmailChange.bind(this);
    this.onPasswordChange = this.onPasswordChange.bind(this);
}

 onEmailChange(event) {
    this.setState({ email: event.target.value });
  }

  onPasswordChange(event) {
    this.setState({ password: event.target.value });
  }

    handlChange = (e) => {
    this.setState({ country: e.target.value,showbutton: true }, () => console.log(this.state));
  }

  render() {
    const options = this.state.name.map((item, index) => {
      return ( 
        <option key={index} disabled={index === 0 ? true : null}>{item.label}</option>
      );
    })
    return (
      <form>
        <input value={this.state.email} onChange={this.onEmailChange} placeholder="Email" /><br/><br/>
        <input value={this.state.password} onChange={this.onPasswordChange} placeholder="Password" /><br/><br/>
        <select
                name="country"
                className="browser-default"
                value={this.state.country}
                onChange={this.handlChange}
          >
                <option value="" disabled>Choose</option>
                {options}
          </select><br/><br/>
        <button disabled={!(this.state.email && this.state.password && this.state.country)}>Submit</button>
      </form>
    );
  }
}

演示