reactjs - 如何打开一个文本字段并设置它的值在反应的下拉列表中选择一些值

Question

我正在尝试根据下拉菜单中的某些选定值显示一个文本框。我的代码是

<label>
 color:
<select value="Radish" onChange ={this.checkColor}>
<option value="Orange">Orange</option>
<option value="Radish">Radish</option>
<option value="Cherry">Cherry</option>
</select>
<input type="text" name="project Id" id="project Id" style={{display:'none'}}/>
<label>

Onchange，将调用以下函数。

CheckLayers(evt){
if(evt.target.value === 'Orange'){
   this.setState({showField:true})
  }
 }

但我看不到文本框。我试图根据 showField 设置条件，但这不起作用。

     (this.state.showField)
      <input type="text" name="project Id" id="project Id" style={{display:'none'}}/>

请指教！！

标签： reactjs

Answer 1

有几件事要检查您的代码。

首先，在你当前实现的<select>and<option>元素中，实际值<select>永远不会改变，因为它总是设置为"Orange"。您还需要将最后选择<select>的值保存在组件的状态中：

checkLayers(event) {
    const { value } = event.target;
    this.setState({
      showField: value === "Orange",
      selectedValue: value
    });
  };

并在您的render方法中selectedValue相应地使用：

render() {
  return (
    <label>
      color
      <select value={this.state.selectedValue} onChange={this.checkLayers}>
        /* {your options} */
      </select>
    </label>
  );
}

接下来要检查的是checkLayers方法。在此方法中，您尝试访问this. 由于<select>'s 的onChange回调将在与您的组件不同的上下文中被调用（您可以通过this在内部登录来检查这一点checkLayers）。因此，您需要将该checkLayers方法绑定到组件的上下文。这可以通过在将函数作为回调传递时显式绑定函数或将类方法定义为箭头函数来完成。

绑定选项（在render方法中）：

<select value={selectedValue} onChange={this.checkLayers.bind(this)}>

类方法作为箭头函数选项：

class MyComponent extends React.Component {
...
  checkLayers = (event) => {
    const { value } = event.target;
    this.setState({
      showField: value === "Orange",
      selectedValue: value
    });
  };
...

还有一个使用箭头函数的替代选项：

<select value={selectedValue} onChange={(event) => this.checkLayers(event)}>

你可以在这里了解更多this

最后要检查的是您如何尝试有条件地渲染<input>元素。现在，您将样式硬编码为{ display: 'none' }. 您可以根据 的值更改它showField，但我认为最好只渲染<input>when showFieldis true，如下所示：

  render() {
    const { selectedValue, showField } = this.state;
    return (
      <label>
        color:
        <select value={selectedValue} onChange={this.checkLayers.bind(this)}>
          /* {your options} */
        </select>
        {showField ? (
          <input
            type="text"
            name="project Id"
            id="project Id"
          />
        ) : null}
      </label>
    );
  }

在这里，我们使用三元运算符来决定是渲染元素还是不渲染（使用null）。

你可以在这里看到最终的实现：

如果您还有其他问题，请发表评论，干杯！