web-dev-qa-db-ja.com

プログラムでantd選択アイテムをクリアする方法

私は https://ant.design/components/select/ を使用しています

選択したアイテムを<Select>からプログラムで削除するにはどうすればよいですか？
注：<Option>は文字列値ではなくノードです。

reactjsantd
7
Feng Xi

値をnullに設定するだけです。例えば.

<Select value={null} />
4
coderek

Selectの値を状態に割り当てることは機能するはずです。次のようなものを試してください：

class Banana extends React.Component {
  constructor() {
    super();
    this.state = {};

    this.handleChange = this.handleChange.bind(this);
    this.clearSelected = this.clearSelected.bind(this);
  }

  handleChange(value) {
    this.setState({ selected: value });
  }

  clearSelected() {
    this.setState({ selected: null });
  }

  render() {
    return (
      <div>
        <Select value={this.state.selected} style={{ width: 120 }} onChange={this.handleChange}>
          <Option value="jack">Jack</Option>
          <Option value="lucy">Lucy</Option>
          <Option value="disabled" disabled>Disabled</Option>
          <Option value="Yiminghe">yiminghe</Option>
        </Select>
        <Button onClick={this.clearSelected}>clear selected</Button>
      </div>
    );
  }
}

https://codepen.io/anon/pen/NwYdEx?editors=001

1
Max

これを試して

    class Banana extends React.Component {
          constructor() {
            super();
            this.state = {
        selected: []
};

            this.handleChange = this.handleChange.bind(this);
            this.clearSelected = this.clearSelected.bind(this);
          }

          handleChange(value) {
            this.setState({ selected: value });
          }

          clearSelected() {
            this.setState({ selected: []});
          }

          render() {
            return (
              <div>
                <Select value={this.state.selected} style={{ width: 120 }} onChange={this.handleChange} placeholder="Select option">
                  <Option value="jack">Jack</Option>
                  <Option value="lucy">Lucy</Option>
                  <Option value="disabled" disabled>Disabled</Option>
                  <Option value="Yiminghe">yiminghe</Option>
                </Select>
                <Button onClick={this.clearSelected}>clear selected</Button>
              </div>
            );
          }
        }
1
Duber Fernando Montoya Agudelo

状態を使用せず。ライブラリ自体からコードが取得されました（_ this.onClearSelectionin Select.js）。

class MySelection extends React.Component {
      constructor() {
        this.handleChange = this.handleChange.bind(this);
        this.clearSelected = this.clearSelection.bind(this);
      }

      handleChange(value) {
        this.setState({ selected: value });
      }

      clearSelection() {
        const _this = this.refs.mySelection.rcSelect;
        const props = _this.props;
        const state = _this.state;

        if (props.disabled) {
          return;
        }

        let inputValue = state.inputValue;
        let value = state.value;

        if (inputValue || value.length) {
          if (value.length) {
            _this.fireChange([]);
          }

          _this.setOpenState(false, {
            needFocus: true
          });

          if (inputValue) {
            _this.setInputValue("");
          }
        }
      }

      render() {
        return (
          <div>
            <Select ref="mySelection" onChange={this.handleChange} placeholder="Select option">
              <Option value="jack">Jack</Option>
              <Option value="lucy">Lucy</Option>
            </Select>
            <Button onClick={this.clearSelection}>clear selected</Button>
          </div>
        );
      }
    }
0
Ahmad Hafiz