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

Question

语境：

问题：

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

谢谢！

Answer 1

向组件添加状态，向组件添加 onChange 事件，在 onChange 函数中使用 setState 更新状态，使用状态值保护输入字段，以便它仅在评估为 true 时显示。当 onChange 被触发并调用 setState 时，渲染将自动重新触发（react 在状态更改时触发重新渲染）。下面是半伪代码：class MyComponent extends React.Component {&nbsp; state = {&nbsp; &nbsp; showPrefixField: false;&nbsp; }updateShowPrefix(event) {&nbsp; const newValue = event.currentTarget.value === 'yes' ? true : false; //ternary statement sets boolean to true when they click on yes&nbsp; this.setState({showPrefixField: newValue}); // update state with true/false}render() {&nbsp; <input type="radio" onChange={this.updateShowPrefix} value='yes' />&nbsp; <input type="radio" onChange={this.updateShowPrefix} value='no' />&nbsp; //the line below is a guard condition meaning anything following the ampersands will only execute if its true&nbsp; {this.state.showPrefixField &&&nbsp;&nbsp; &nbsp; <label>prefix:</label>&nbsp; &nbsp; <input type="text" name="prefixFeild" />&nbsp; }}