Блог

Я новичок в React.

Мне нужно выполнить функцию, в которой, когда пользователь выбирает «C», все выбранные параметры будут C.

Но проблемы здесь в том, что когда я выбираю «A», все значение также изменится на «A», и то же самое относится и к «B». Я хочу внести в него изменения только для «C».

Это часть моего кода

 handleChange = (value: any) => {
  this.setState({
    selectedAnswer: value,
  });
};

<label>Select First</label>
<Select 
  defaultValue={this.state.selectedAnswer} 
  value={this.state.selectedAnswer === "c" ? "c": this.state.selectedAnswer}
  onChange={this.handleChange}
>
   <Option value="a">A</Option>
   <Option value="b">B</Option>
   <Option value="c">C</Option>
</Select>

<label>Select Second</label>
<Select 
  defaultValue={this.state.selectedAnswer} 
  value={this.state.selectedAnswer === "c" ? "c": this.state.selectedAnswer}
  onChange={this.handleChange}
>
   <Option value="a">A</Option>
   <Option value="b">B</Option>
   <Option value="c">C</Option>
</Select>

<label>Select Third</label>
 <Select 
      defaultValue={this.state.selectedAnswer} 
      value={this.state.selectedAnswer === "c" ? "c": this.state.selectedAnswer}
      onChange={this.handleChange}
    >
   <Option value="a">A</Option>
   <Option value="b">B</Option>
   <Option value="c">C</Option>
</Select>
 

Очень признателен, если кто-нибудь может мне помочь в этом.

вы используете this.state.selectedAnswer для выпадающего списка all , поэтому он изменит значение выпадающего списка all . Попробуйте использовать другую переменную, как показано ниже.

 handleChange = (value: any) => {
   this.setState({
    selectedAnswer: value,
    selC:value === 'c' ? 'c' : '' //if c is not selected then reset the dropdown(in my exapmle it would be select)
    
  });
};

<label>Select First</label>
<select 
  defaultValue={this.state.selectedAnswer} 
  value={this.state.selectedAnswer === "c" ? "c": this.state.selectedAnswer}
  onChange={this.handleChange}
>
   <option value="a">A</option>
   <option value="b">B</option>
   <option value="c">C</option>
</select>

<label>Select Second</label>

<select 
  value={this.state.selC}
  onChange={this.handleChange}
>
  <option>Select</option>
   <option value="a">A</option>
   <option value="b">B</option>
   <option value="c">C</option>
</select>

<label>Select Third</label>
 <select 
     
      value={this.state.selC}
      onChange={this.handleChange}
    >
      <option>Select</option>
   <option value="a">A</option>
   <option value="b">B</option>
   <option value="c">C</option>
</select>