Как использовать selectedOption вact-select - PullRequest
Новая
       58

Как использовать selectedOption вact-select

0 голосов
/ 10 апреля 2020

Я использую реагировать на выбор, и я новичок. У меня есть компонент с именем Example, который правильно выполняет метод handleChange 

const colourOptions = [
  { value: '1', label: '1', color: '#00B8D9' },
  { value: '2', label: '2', color: '#0052CC' },
  { value: '3', label: '3', color: '#5243AA' },
];

class Example extends React.Component {
  state = {
    selectedOption: null,
  }

  handleChange = (selectedOption) => {
    this.setState({ selectedOption });
    console.log(selectedOption)
  }

  render() {
    const { selectedOption } = this.state;
    return (
        <Select
          value={selectedOption}
          onChange={this.handleChange}
          options={colourOptions}
        />
    );
  }
}

export default Example;

В другом файле у нас есть кнопка 

export default function UserProfile() {
  return (
    <div>

      <Example1/>
      <Example2/>
      <Example3/>

      <Button type="Submit">Search</Button>

    </div>
  );
}

Как я могу отобразить значение selectedOption, нажав на кнопку?

1 Ответ

0 голосов
/ 10 апреля 2020

Правильный способ - сохранить selectedOption и handleChange в родительском (UserProfile) и передать их дочернему элементу (пример).

UserProfile Component 

export default function UserProfile() {
  const [selectedOption, setSelectedOption] = useState({});

  const handleChange = (selectedOption) => {
    setSelectedOption(selectedOption)
    console.log(selectedOption)
  };

  const handleClick = () => {
    console.log(selectedOption);      
  };

  return (
    <div>

      <Example onHandleChange={handleChange} selectedOption={selectedOption}/>

      <Button onClick={handleClick} type="Submit">Search</Button>

    </div>
  );
}

Пример компонента 

class Example extends React.Component {

  render() {
    const { selectedOption, onHandleChange } = this.props;

    return (
        <Select
          value={selectedOption}
          onChange={onHandleChange}
          options={colourOptions}
        />
    );
  }
}

export default Example;
...