javascript - 如何使用 react 选择列表？

Question

我是react新手，我想在功能组件中使用react-select。但总是收到此错误:

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

下面是文件 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

Answer 1

handleChange、selectedOption 和 options 未定义

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

您应该检查 class/react Component 之间的区别例如，您可以在其中使用 this (this.setState({}), this.state.XXX, this.props) :

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

和一个react hook function ，您可以在其中使用钩子(Hook)(没有这个):

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

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