Как условно визуализировать тег выбора в React.js при изменении состояния? - PullRequest
Новая
       19

Как условно визуализировать тег выбора в React.js при изменении состояния?

0 голосов
/ 12 июня 2019

Я хочу визуализировать входные данные Select в React.js, после чего при выборе одного из его параметров будет отображаться текстовый ввод.Когда текстовый ввод получает значение, я хочу визуализировать второй выбор ввода.

1 Ответ

0 голосов
/ 12 июня 2019

Вы можете реализовать это, используя React's Component State API и создав контролируемый компонент . Если я правильно понимаю ваш вопрос, вы хотите визуализировать текстовое поле после первого выделения, скажем, <select /> input 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>
    )
  }
}
...