Блог

У меня есть эта панель поиска, которая использует react-select, дизайн которой обязал меня создать отдельную кнопку сброса. Эта кнопка сброса должна быть отключена до тех пор, пока пользователь не начнет печатать, и как только он нажмет на нее, он сбросит поиск (очевидно) и вернется в отключенное состояние.

У меня есть этот пример кода

 class App extends React.Component {
  constructor(props) {
    super(props);

    const options = [
      { value: "one", label: "One" },
      { value: "two", label: "Two" },
      { value: "three", label: "Three" },
      { value: "four", label: "Four" },
      { value: "five", label: "Five" }
    ];

    this.state = {
      select: {
        value: null,
        options
      },
      isDisabled: true
    };
  }

  setValue = (value) => {
    this.setState((prevState) => ({
      select: {
        ...prevState.select,
        value
      }
    }));
  };

  handleChange = (value) => {
    this.setValue(value);
    this.setState({ isDisabled: false });
  };

  handleInputChange = (value) => {
    if (value.length < 1) {
      this.setState({ isDisabled: true });
    }
    if (value.length > 0) {
      this.setState({ isDisabled: false });
    }
  };

  handleClick = () => {
    console.log('reset!');  ===> not happening!
    this.setValue(null);
    this.setState({ isDisabled: true });
  };

  render() {
    const { select, isDisabled } = this.state;

    return (
      <div style={styles}>
        <p>
          <button type="button" onClick={this.handleClick} disabled={isDisabled}>
            Reset value
          </button>
        </p>
        <Select
          name="form-field-name"
          value={select.value}
          onChange={this.handleChange}
          onInputChange={this.handleInputChange}
          options={select.options}
          isSearchable={true}
          isMulti
        />
      </div>
    );
  }
}
  

ссылка на код https://codesandbox.io/s/react-select-detached-reset-button-fqr74

Состояние самой кнопки работает нормально, включается и отключается в нужный момент, но оно полностью игнорирует событие щелчка и не сбрасывается. Если я удалю disabled атрибут, событие щелчка сработает, но затем я потеряю отключенное состояние кнопки.

Какие-либо советы?

Спасибо!

Проблема в том, что onInputChange вызывается, как только select теряет фокус и отключает кнопку. Это произойдет, если вы уже выбрали некоторые значения, поскольку значение prop все равно будет пустым. Просто добавьте проверку для любого значения во входных данных перед отключением кнопки.

  handleInputChange = (value) => {
    if (value.length < 1) {
      this.setState({ isDisabled: true });
    }
    //Check if SELECT has any value
    if (value.length > 0 || !!this.state.select.value) {
     this.setState({ isDisabled: false });
    }
 };