Блог

Главная - Вопросы по программированию - Почему значение, установленное во входном значении, имеет только тип string?

Почему значение, установленное во входном значении, имеет только тип string?

#javascript #reactjs

#javascript #reactjs

Вопрос:

Здесь я хочу установить значение в setstate как целое в моем компоненте reactjs. Я не могу этого сделать, поскольку значение не задано как целое, поэтому в переключателе оно не отображается как отмеченное.

 constructor(props) {
  super(props);
  this.state = {
   frequency: 1,
}
handleSelectChange(event) {

  this.setState({
    frequency: event.target.value
  })
};


<div className = "custom-control custom-radio custom-control-inline"
onChange = {
    this.handleSelectChange.bind(this)
  } >
  <
  input type = "radio"
id = "oneTime"
value = "0"
name = "type"
onChange = {
  event => this.handleSelectChange(event)
}

checked = {
  this.state.frequency === "0"
}
className = "custom-control-input" / >
  <
  label className = "custom-control-label"
htmlFor = "oneTime" > {
    Labels.PRODUCT_SUBSCRIPTION.ONETIME
  } <
  /label> < /
div > <
  div className = "custom-control custom-radio custom-control-inline" >
  <
  input type = "radio"
id = "continuous"
value = "1"
name = "type"
checked = {
  this.state.frequency === "1"
}
onChange = {
  event => this.handleSelectChange(event)
}
className = "custom-control-input" / >
  <
  label className = "custom-control-label"
htmlFor = "continuous" > {
    Labels.PRODUCT_SUBSCRIPTION.CONTINUOUS
  } 
  </label>
  </div>  
 <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>

Я знаю, что мы можем установить это, используя defaultValue . Но тогда это становится неконтролируемым, что не поощряется.

Ответ №1:

Вместо установки значения в виде строки, подобной

 <input type="radio" value="1" />

Установите его как целое

 <input type="radio" value={1} />

Также попробуйте использовать === при сравнении, если вы хотите, чтобы какое-то значение вашего состояния было строго number, иначе ваши сравнения не будут очень строгими

Редактировать

Чтобы установить флажок для переключателя, вы можете затем установить checked значение radio, сравнив его со значением state

 <input type="radio" checked={this.state.frequency === 1} value={1} />

Комментарии:

1. Я пробовал это ранее, но переключатель не проверяется, когда я нажимаю на него.

2. оно будет проверяться не на основе значения, а на проверяемом свойстве, позвольте мне отредактировать мой ответ

Ответ №2:

Вы должны инициализировать значение следующим образом:

 <input type="radio"
 checked={this.state.frequency === 1}
 value={this.state.frequency || 0} />

Вы уже заметили из другого ответа, который value="0" будет представлять строку, 0 в то время как value={0} будет представлять целое число 0 .