javascript - how to use react-select list?

Question

I am new to react and i want to use react-select in a functional component. but always getting this error:

'handleChange' is not defined no-undef
'selectedOption' is not defined no-undef
'options' is not defined no-undef

below is the code inside a file Store.js

import React from 'react';
import Select from 'react-select';

function Store(){

    React.useState({selectedOption: null})

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

    return (
        <div>
            <div className='col-md-4' >
                <Select
                    value={selectedOption}
                    onChange={this.handleChange}
                    options={options}
                />
            </div>
        </div>
    )
}
export default Store

标签： javascriptreactjsreact-native

Answer 1

handleChange, selectedOption and options are not defined

import React from 'react';
import Select from 'react-select';

const options = [] //YOUR OPTIONS HERE

function Store(){
    const [selectedOption, set_selectedOption] = React.useState('')

    function handleChange(_selectedOption) {
        set_selectedOption(_selectedOption)
    };

    return (
        <div>
            <div className='col-md-4' >
                <Select
                    value={selectedOption}
                    onChange={handleChange}
                    options={options}
                />
            </div>
        </div>
    )
}
export default Store

You should check the difference between a class/react Component where you can use this (this.setState({}), this.state.XXX, this.props) for example :

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

and a react hook function, where you can use hooks (no this) :

function Welcome(props) {
  const [name, set_name] = useState('Hello');

  return <h1>Hello, {props.name}</h1>;
}