有没有办法使用这个反应多重选择

Question

我以前有一个这样的复选框

renderCategoriesMD() {
  const { classes, categoriesArray } = this.props;
  const { checkedCategories, reset } = this.state;
  if (categoriesArray && categoriesArray.length > 0) {
    return categoriesArray.map((cat, index) => {
      return (
        <div>
          <FormControlLabel
            key={index}
            control={
              <Checkbox
                tabIndex={-1}
                onClick={() => this.handleToggleCats(index)}
                checked={checkedCategories.indexOf(index) !== -1}
                checkedIcon={<Check className={classes.checkedIcon} />}
                icon={<Check className={classes.uncheckedIcon} />}
                classes={{
                  checked: classes.checked,
                  root: classes.checkRoot,
                }}
              />
            }
            classes={{ label: classes.label }}
            label={
              <Typography style={{ fontSize: 13 }}>
                {cat.name || ""}
              </Typography>
            }
          />
          {!reset && (
            <div style={{ marginLeft: 10 }}>
              {this.renderUnderSubCategoriesMD(cat)}
            </div>
          )}
        </div>
      );
    });
  }

  return null;
}

这样做是填充复选框的选项，如下图所示。

我现在想要实现的是对多个选项进行反应选择，因此我可以从反应选择中选择选项而不是复选框。

<Select
  value={this.state.value}
  name="filter__statistics"
  options={options}
  onChange={this.handleChange}
  multi={true}
/>

Answer 1

我推荐你使用 npm 包，它非常易于使用和实现。 npm react-select

有一个例子

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

const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' },
];

class App extends React.Component {
    state = {
        selectedOption: null,
    };
    handleChange = selectedOption => {
        this.setState({ selectedOption });
        console.log(`Option selected:`, selectedOption);
    };
    render() {
        const { selectedOption } = this.state;

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