Реагируйте JS - Как вы можете открыть текстовую форму при выборе опции радио?

Question

Контекст:

Проблема:

Как видите из изображения у пользователя есть две опции, и я только wi sh открою поле ввода «Префикс», если пользователь выберет «Да, установить префикс». Для обеспечения дополнительного контекста введенные пользователем данные будут позже использованы для создания предварительного просмотра в реальном времени, как показано на правой стороне изображения. У Ant Design, похоже, нет примера, относящегося к этой конкретной ситуации c, и я пытаюсь поправиться с React JS, поэтому любые идеи будут высоко оценены. Даже если бы вы могли указать мне на ресурсы, это было бы здорово.

Спасибо!

Answer 1

Добавьте состояние к вашему компоненту, добавьте событие onChange к своему компоненту, обновите состояние с помощью setState внутри функции onChange, защитите поле ввода значением состояния, чтобы оно показывалось только тогда, когда оно оценивается как истинное. Рендеринг автоматически сработает при срабатывании onChange и вызове setState (реакция запускает рендеринг при изменении состояния). Ниже приведен полупсевдокод:

class MyComponent extends React.Component {
  state = {
    showPrefixField: false;
  }

updateShowPrefix(event) {
  const newValue = event.currentTarget.value === 'yes' ? true : false; //ternary statement sets boolean to true when they click on yes
  this.setState({showPrefixField: newValue}); // update state with true/false
}

render() {
  <input type="radio" onChange={this.updateShowPrefix} value='yes' />
  <input type="radio" onChange={this.updateShowPrefix} value='no' />

  //the line below is a guard condition meaning anything following the ampersands will only execute if its true
  {this.state.showPrefixField && 
    <label>prefix:</label>
    <input type="text" name="prefixFeild" />
  }

}