Блог

У меня есть это React.js код «свяжитесь с нами». Я сделал три переключателя, но они не работают. Я хочу отключить ввод выбора до тех пор, пока не нажму на определенный переключатель «запросы на обслуживание». Когда я нажимаю на него: выбранный ввод будет включен, иначе он останется отключенным.

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 amp;amp; (
          <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 amp;amp; (
          <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 });
};
 

Вам необходимо обновить свои переключатели. Значение name каждой переключающей кнопки должно быть одинаковым, таким образом, вы знаете, что они принадлежат к одной и той же «группе». Это value значение, которое вы хотите сохранить в своем состоянии.

Вам также необходимо добавить checked реквизит. Вы устанавливаете его true , если текущий input является проверенным и сохраненным в вашем состоянии.

Если состояние обрабатывается правильно, вы можете проверить, является ли объект тем, который требуется, и отключить select поле на основе состояния.

Проверьте фрагмент кода ниже и нажмите «Запустить фрагмент кода», он должен работать так, как вы описали.

 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>