React JS - 如何在选择单选选项后显示文本表单？

Question

语境：问题：从图片中可以看出，用户有两个选项，如果用户选择“是，设置前缀”，我只希望显示“前缀”输入框。为了提供更多上下文，用户的输入稍后将用于生成实时预览，如图像右侧所示。Ant Design 似乎没有与这种特定情况相关的示例，我正在尝试使用 React JS 变得更好，因此任何见解都将不胜感激。即使您可以向我指出很棒的资源。谢谢！

Answer 1

向组件添加状态，向组件添加 onChange 事件，在 onChange 函数中使用 setState 更新状态，使用状态值保护输入字段，以便它仅在评估为 true 时显示。当 onChange 被触发并调用 setState 时，渲染将自动重新触发（react 在状态更改时触发重新渲染）。下面是半伪代码：

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" />

  }

}