时间戳

首页 > 解决方案 > 根据 React 中的选定值更改按钮的颜色

javascript - 根据 React 中的选定值更改按钮的颜色

问题描述

我是新手，react js. 我有一个普通表单，使用简单的 bootstrap 3 表单。在这里，我有两个选择

<form className="form-inline text-center row" role="form">
  <div className="col-xs-4">
    <div className="form-group col-xs-12">
      <label className="control-label">company/project</label>
      <select id="company" className="form-control" onChange={(event, newValue) => this.setState({ company: event.target.value, hasUserFilledCompany: true })}>
        <option disabled selected value>None Selected</option>
        <option>abc</option>
        <option>pqr</option>
        <option>xyz</option>
        <option>cdcdc</option>
        <option>abcd</option>
      </select>
    </div>
  </div>
  <div className="col-xs-4">
    <div className="form-group  col-xs-12">
      <label>Select Technology</label>
      <select id="Technology" className="form-control" onChange={(event, newValue) => this.setState({ Technology: event.target.value, hasUserFilledTech: true })}>
        <option disabled selected value>None Selected</option>
        <option>qwe</option>
        <option>gahs</option>
        <option>cdbcdbhcd</option>
        <option>cdcdc</option>
        <option>cdcbdc</option>
      </select>
    </div>
  </div>
  <div className="col-xs-4">
    <div className="form-group col-xs-12" style={jobUpload}>
      <div className="row">
        <label>Job Description</label>
        <button type="button" className={"btn " + ((this.state.hasUserFilledTech && this.state.hasUserFilledCompany) ? 'enable-Button' : 'jd-button')} onClick={(event) => this.createJob(event)}>Add/Paste</button>
        <span style={or}>Or</span>
        <button type="button" className="btn jd-button">Upload File</button>
      </div>
    </div>
  </div>
</form>

现在，在这里，我想要做的是用户从选择中选择值然后按钮颜色将被更改并且它也将被启用。为此，我的解决方案是我在 select 上使用两个变量作为状态变量，如果这成为真的，那么我将条件类应用于此按钮。

这是有效的，但我认为这不是验证表单的正确解决方案。我怎样才能做到这一点？

标签： javascripthtmlreactjstwitter-bootstrapreact-redux

解决方案

这就是你可以做到这一点的方法。一些好的做法是如何onChange在 select 中实现函数。你在那里重复一下。注意我是如何在onChange函数中解构事件的。而且您不需要另一个变量，您只需检查!!company && company.length > 0.

这是演示https://codesandbox.io/s/30yj7mrq4q

class App extends React.Component {
  state = {
    company: "",
    tech: ""
  }

  onChange = ({ target: { name, value } }) => {
    this.setState({ [name]: value });
  }

  render() {
    const { tech, company } = this.state;
    const enabled = (!!tech && tech.length > 0) && (!!company && company.length > 0)

    return (
      <div>
        <div>
          <label> Company </label>
          <select name="company" onChange={this.onChange}>
            <option disabled selected value>None Selected</option>
            <option> Google </option>
            <option> Facebook </option>
            <option> Microsoft </option>
          </select>
        </div>
        <div>
          <label> Tech </label>
          <select name="tech" onChange={this.onChange}>
            <option disabled selected value>None Selected</option>
            <option> React </option>
            <option> Angular </option>
            <option> Vue </option>
          </select>
        </div>
        <div>
          <button className={`btn ${enabled ? "enabled" : "disabled"} `} disabled={!enabled}>Upload File</button>
        </div>
      </div>
    )
  }

}

推荐阅读