Не устанавливается флажок checked (radio button) в onChange

180

08 августа 2021, 15:30

Я в React JS новый, хотел бы кое что уточнить Код есть, в базе данных все корректно меняется при нажатии на кнопку. Проблема лишь в том, что оно не check-ается по внешнему виду(на фронт енде) не ясно какое значение стоит Как исправить, подскажите пожалуйста.

Вот собственно код:

constructor(props){
        super(props);
        this.state = {
            user : props.user,
        };
        this.sexChange = this.sexChange.bind(this);
    }
    sexChange(event){
        Loader.startProgress();
        Http.postJson("/profile/update-data",{
            genderUser : event.target.value
        },(body,status,response) => {
            if(response.status === 202){
                this.setState({ user : body });
            }
            Loader.stopProgress();
        },(response) => {
            Loader.stopProgress();
            Dialog.alert("Не удалось изменить");
        });
    }
 <div className="user-sex">
     <div className="radio">
         <label>
            <input type="radio" name="sex" value="1" onChange={this.sexChange} checked={ person.genderUser && person.genderUser.id == 1 } />
           <div>М</div>
            </label>
            <label>
            <input type="radio" name="sex" value="2" onChange={this.sexChange} checked={ person.genderUser && person.genderUser.id == 2 }/>
            <div>Ж</div>
         </label>
    </div>
</div>

что я делаю не так?

Answer 1

Не зная всей логики твоего кода

this.state = {
            user : props.user,
            genderUser:1
        };

В функцию sexChange() добавь this.setState({ genderUser : event.target.value }) В checked={ this.state.genderUser === 1 }

Answer 2

На этапе рендеринга атрибут checked полей ввода переопределяет значение в DOM. С неуправляемым компонентом зачастую нужно, чтобы React определил первоначальное значение, но впоследствии ничего не делал с ним. В этом случае необходимо определить атрибут defaultСhecked вместо checked.

Пример кода (согласно Вашему коду), работающего без побочного эффекта:

class App extends React.Component { 
  constructor(props) { 
    super(props); 
     
    this.state = { checked: 1 }; 
     
    this.setGender = this.setGender.bind(this); 
  } 
   
  setGender(event) { 
    console.log('Selected gender value: ', event.target.value); 
    this.setState({ checked: event.target.value }); 
  } 
   
  render() { 
    const { checked } = this.state; 
    return (  
      <div> 
        <label> 
          <input 
            type="radio" 
            value="1" 
            name="gender" 
            onChange={this.setGender} 
            defaultChecked={checked == 1} 
          /> 
          <span>Male</span> 
        </label> 
        <label> 
          <input 
            type="radio" 
            value="2" 
            name="gender" 
            onChange={this.setGender} 
            defaultChecked={checked == 2} 
          /> 
          <span>Female</span> 
        </label> 
      </div> 
     ) 
  } 
} 
 
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
<div id="app"></div>

Для решения проблемы нужно использовать аттрибут defaultChecked вместо checked.

Ссылки для ознакомления:

Неуправляемые компоненты
Управляемые компоненты

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

window object внутри js класса

Имеется js classВозможно ли внутри класса отслеживать изменился размер window или нет, и если изменилось применять метод класса? Проблема: в классе...

133

javascript