Радиоактивные кнопки ReactJS

Question

У меня проблемы с отображением информации в зависимости от выбранного переключателя. Что должно произойти, когда нажата кнопка «Да», должно появиться «Добро пожаловать, пользователь». Если выбрано no, появится сообщение «Пожалуйста, войдите».

У меня тоже проблемы со штатами. Когда я нажимаю кнопку изначально, кнопка консоли отображает мое состояние как пустое. Затем, когда я нажимаю «нет», состояние обновляется как «да» и наоборот. Не уверен, что здесь происходит.

render() {
  return (
    <form onSubmit={this.onFormSubmit}>
        <p>Did you go to the lecture?</p>

      <label>
        <input
          type="radio"
          value="No"
          checked={this.state.goToLectue === 'No'}
          onChange={this.handleChange}
        />
        No
      </label>
      <label>
        <input
          type="radio"
          value= "Yes"
          checked={this.state.goToLectue === 'Yes'}
          onChange={this.handleChange}
        />
        Yes
      </label>

      <div> 
        <Response goToLecture = {this.state.goToLectue}/>        
      </div>
 );
}

  onFormSubmit = e => {        
    e.preventDefault();
    console.log('Chosen: ' + this.state.goToLectue);
  };

  handleChange = e => {
    this.setState({
      goToLectue: e.target.value
    });
    console.log('value of goToLectue onchange: ' + this.state.goToLectue);
  }

функция внешнего компонента

function Response(props) { 
  if (props.goToLectue) 
      return <h1>Welcome User</h1>; 
  else
      return <h1>Please Login</h1>; 
} 

Answer 1

Я вижу ряд проблем.

Я исправил их для вас в Codepen: https://codepen.io/anon/pen/YRWWEQ

1. В Response оператору if передается props.goToLecture, который может быть только «Да» или «Нет», обе эти строки будут считаться верными. Я добавил === 'Yes', чтобы исправить это. Совет на будущее - придерживаться значения boolean везде, где это возможно, так как это делает условные выражения намного лучше.
2. Казалось, что в коде есть несоответствие lecture и lectue. Я предполагаю, что последний был опечаткой.
3. <form> тег отсутствует, это </form>
4. При начальном рендеринге goToLecture не установлен в состояние и поэтому выдает ошибки, возможно, именно поэтому вы видели пустой экран. Я добавил состояние по умолчанию как undefined, чтобы позволить вам не показывать ни «ответ», пока не будет нажата радиокнопка, если вы выберете.

Надеюсь, это поможет!

Answer 2

Я вижу две проблемы в вашем коде:

1) Компонент Response ожидает логическое значение в своем свойстве props.goToLectue, но вы передаете ему строку («Да» или «Нет»). Либо измените state.goToLectue основного компонента на логическое значение, либо вы можете сделать что-то вроде <Response goToLecture = {this.state.goToLectue === 'Yes'}/>.

2) В вашем handleChange методе вы регистрируете this.state.goToLectue - это значение устарело, вы не увидите эффекта вызова setState сразу, а только при следующем вызове render(). Вы должны войти e.target.value вместо этого.

Надеюсь, это поможет.