条件输入框渲染答案

【问题标题】：conditional input box rendering条件输入框渲染
【发布时间】：2020-07-10 18:08:57
【问题描述】：

我是 react js 的新手。我在 react js 中有一个下拉菜单，有两个选项 1. 公司 2. 个人`

      <select value={this.state.value}>
        <option value="company">Company</option>
        <option value="individual">individual</option>
      </select>

如果我选择公司而不是显示

<input type="text" name="company" />

如果我选择个人而不是显示

<input type="text" name="individual" />

通过 react js 中的状态管理。

这是我尝试使用按钮 onClick 隐藏和显示的代码

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  changeColor = () => {
    this.setState({
      color:"blue", 
      brand:"audi" , 
      model:"a8" , 
      year:2000
    });
  }

  state = {
    isActive: false
  }

  handleShow = () => {
    this.setState({
      isActive: true
    })
  }

  handleHide = () => {
    this.setState({
      isActive: false
    })
  }

  render() {
    const message = 'You selected ' + this.state.selectedValue;
    return (
      <div>
        <h2>It is {new Date().toLocaleTimeString()}.</h2>
        <table border="1" width="100%">
          <tr>
            <td><h1>{this.state.brand}</h1></td>
            <td><h1>{this.state.color}</h1></td>
            <td><h1>{this.state.model}</h1></td>
            <td><h1>{this.state.year}</h1></td>
          </tr>
        </table>

        <button
          type="button"
          onClick={this.changeColor}
        >Change details</button>
       <hr></hr>
        {this.state.isActive && <h1>i am changing state</h1>}
        <button onClick={this.handleShow}>Show</button>
        <button onClick={this.handleHide}>Hide</button>
        <hr></hr>

      </div>

    );
  }
}

ReactDOM.render(<Car />, document.getElementById('root'));

【问题讨论】：

你试过什么？ Stack Overflow 不是代码编写服务。我们在这里帮助您解决您试图自行解决的问题。你看过任何教程或阅读过任何关于 React 条件渲染的文档吗？这将是一个很好的起点。
我已经尝试使用按钮 onClick 更改隐藏和显示，但我真的不知道与下拉菜单有关...
@JMadelaine 你能给我建议任何链接，这样我就可以帮助自己......如果可能的话
您甚至没有正确解释问题，无论如何，使用this.state.value 有条件地呈现您的输入，初始化this.state.value = '' 以便在定义时显示输入，否则不

标签： reactjs react-native state-management react-state-management

【解决方案1】：

当<select/> 值随onChange 事件发生变化时，您需要控制状态。

我创建了一个code sandbox，并为您提供了一个有效的实现。

当<select/>节点的值发生变化时，状态被设置为新值并重新渲染组件。如果值为company，则显示一个输入，如果值为individual，则显示另一个输入。

【讨论】：