条件输入框渲染

Question

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

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

如果我 select 公司比显示

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

如果我select个人比表演

<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'));

Answer 1

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

我为您制作了一个 code sandbox 的有效实现。

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

条件输入框渲染

conditional input box rendering

reactjs

react-native

state-management

react-state-management