使用react-select隐藏/显示元素-不隐藏元素

debugcn 发表于 Dev

azr481

我正在使用带有状态列表的react-select库，然后使用该库来隐藏/显示我的元素当我从列表中选择元素时会显示元素，但是在删除它们时不会隐藏它们。这是代码：

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

const options = [
    { value: 'ny', label: 'NY' },
    { value: 'ca', label: 'California' },
    { value: 'ak', label: 'Arkansas' }
];

export default class HomePage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    handleChange = (selectedOption) => {
        if (!selectedOption) {
            this.setState({})
        }
        else {
            const result = {}
            
            selectedOption.map((option) => {
                result[option.value] = true
            })

            this.setState(result)
        }
    }

    render() {
        return (
            <div>
                <Select
                    isMulti
                    onChange={this.handleChange}
                    options={options}
                />
                {this.state.ny && (
                    <div>NY State Images</div>
                )}
                {this.state.ca && (
                    <div>CA State Images</div>
                )}
                {this.state.ak && (
                    <div>AK State Images</div>
                )}
            </div>
        )
    }
}

彼得

这有点奇怪React.Component。

尝试使用功能组件：

export default function HomePage() {
  const [state, setState] = useState({});

  const handleChange = selectedOption => {
    console.log("CHANGE_HAPPEN: ", selectedOption);
    if (!selectedOption) {
      setState({});
    } else {
      const result = {};

      selectedOption.forEach(option => {
        result[option.value] = true;
      });
      console.log("RESULT: ", result);
      setState(prev => result);
    }
  };

  return (
    <div>
      <Select isMulti onChange={handleChange} options={options} />
      {state.ny && <div>NY State Images</div>}
      {state.ca && <div>CA State Images</div>}
      {state.ak && <div>AK State Images</div>}
    </div>
  );
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。