Question

我想在React.js中渲染一个Select输入，然后选择其中一个选项，一个text类型的Input将被渲染。当文本Input收到一个值时，我想渲染第二个Select输入。

Answer 1

您可以通过利用React的组件状态API并创建一个controlled component来实现这一点。如果我正确理解了您的问题，那么您想在假设<select />输入1的第一个选择之后呈现文本框，然后在文本框收到某种类型的输入值之后，然后呈现一个文本框。第二<select />。

一个快速的实现可以看起来像这样

class Sample extends React.Component {
  constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.state = {
      firstSelection: '',
      textInput: '',
    }
  }
  handleChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    })
  }
  render() {
    return(
      <div>
        <select value={this.state.firstSelection} name='firstSelection' onChange={this.handleChange}>
          <option disabled value=''>Select an option</option>
          {
            ['option1', 'option2'].map((option, key) => {
              return (
                <option value={option} key={key}>
                  {option}
                </option>
              )
            })
          }
        </select>

        {
          // render textbox if this.state.firstSelection isn't an empty string anymore, thus meaning it was selected
          this.state.firstSelection.trim() &&
          (
            <input type="text" name='textInput' value={this.state.textInput} onChange={this.handleChange}/>
          )
        }

        {
          // render second select if this.state.textInput isn't an empty anymore, thus meaning an input was entered
          this.state.textInput.trim() &&
          (
            <select> ... </select>
          )
        }
      </div>
    )
  }
}

如何在状态更改时有条件地在React.js中呈现选择标签？

1 个答案: