制作一个 React.js 单选按钮来禁用和启用另一个输入（类）

Question

我有这个 React.js 'contact-us' 代码。我制作了三个单选按钮，但它们不起作用。我想禁用选择输入，直到我单击特定的单选按钮“服务中”。当我点击它时：选择输入将被启用，否则它保持禁用状态。

PS：我不使用函数组件，都在一个类中。

render() {
  const { formErrors } = this.state;

  return (
    <div className='row'>
      <div className='col-6'>
        <h> Your Intrest : </h>
        <div className='radio-btn'>
        <label>
        <input
          type='radio'
          name='service'
          value={this.state.subject}
          className={`for formInput ${formErrors.subject != 0 ? 'error' : null}`}
          onChange={this.handleChange}
          placeholder='Service'
          noValidate
        /> intrest in service. </label>
        </div>

        <div className='radio-btn'>
        <label>
        <input
          type='radio'
          name='team'
          value={this.state.subject}
          className={`for formInput ${formErrors.subject != 0 ? 'error' : null}`}
          onChange={this.handleChange}
          placeholder='Team'
          noValidate
        /> Join to our team. </label>
        </div>

        <div className='radio-btn'>
        <label>
        <input
          type='radio'
          name='another'
          value={this.state.subject}
          className={`for formInput ${formErrors.subject != 0 ? 'error' : null}`}
          onChange={this.handleChange}
          placeholder='Another'
          noValidate
        /> Another help.</label>
        </div>

        {formErrors.subject == 0 && (
          <span className='errorMessage'>{formErrors.subject}</span>
        )}
      </div>

      <div className='col-6'>
        <h> Select Service: </h>
        <select
          type='select'
          name='service'
          value={this.state.service}
          className={`form-control formInput ${formErrors.service.length > 0 ? 'error' : null}`}
          onChange={this.handleChange}
          placeholder='Service'
          noValidate
          disabled
        >
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
        {formErrors.service.length > 0 && (
          <span className='errorMessage'>{formErrors.service}</span>
        )}
      </div>
    ...

handleChange方法：

handleChange = (e) => {
  e.preventDefault();
  const { name, value } = e.target;
  let formErrors = { ...this.state.formErrors };

  case 'subject':
    formErrors.subject = value.length < 1 ? 'Please enter a subject.' : '';
    break;
  case 'service':
    formErrors.service = value.length < 1 ? 'Please enter a service.' : '';
    break;

  this.setState({ formErrors, [name]: value });
};

Answer 1

您需要更新单选按钮。每个单选按钮的name 应该相同，这样您就知道它们属于同一个“组”。 value 是您想要存储在您的状态中的值。

您还需要添加一个 checked 属性。如果当前input 是选中的并且存储在您的状态中，则您将其设置为true。

如果状态处理正确，您可以检查主题是否是必需的，并根据状态禁用select字段。

检查下面的sn-p并点击“运行代码sn-p”，它应该像你描述的那样工作。

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      service: "",
      subject: ""
    };
  }

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

  render() {
    return (
      <div className="App">
        <form>
          <fieldset>
            <label>
              <input
                type="radio"
                name="subject"
                checked={this.state.subject === "interest"}
                onChange={this.handleChange}
                value="interest"
              />{" "}
              Interest in service
            </label>
            <label>
              <input
                type="radio"
                name="subject"
                checked={this.state.subject === "join team"}
                onChange={this.handleChange}
                value="join team"
              />{" "}
              Join to our team
            </label>
            <label>
              <input
                type="radio"
                name="subject"
                checked={this.state.subject === "another"}
                onChange={this.handleChange}
                value="another"
              />
              Another help
            </label>
          </fieldset>
          <label>
            Select Service:
            <select
              type="select"
              name="service"
              disabled={this.state.subject !== "interest"}
              onChange={this.handleChange}
              value={this.state.service}
            >
              <option>1</option>
              <option>2</option>
              <option>3</option>
            </select>
          </label>
        </form>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>