reactjs - 如何禁用单击按钮上的组件

Question

我使用了来自react-date-picker. 我需要在单击一次按钮时禁用整个日期控件和按钮本身。该按钮确实被禁用，但DatePicker组件没有。我尝试了以下但没有奏效。有正确的方法吗？

import DatePicker from 'react-date-picker';
...
...
this.state = {
  disabledDate: false
}
    ...
    ...
    ...

  noDateRememberButtonClick() {
    this.setState({
      disabledDate: true
    });
  }

    render() {
           return(
        <div className="wrapper">
          <div className="date-picker">
            <DatePicker
              onChange={this.dateOnChange}
              value={this.state.boughtDate}
              disabled={this.state.disabledDate} />
          </div>
          <button className="btn" onClick={this.noDateRememberButtonClick} disabled={this.state.disabledDate} type="button"> {BUTTON_LABEL}</button>
        </div>

)}

Answer 1

<DatePicker
  ref={endCalendarRef}
  readOnly={true}
  .....
  />

Answer 2

react-date-picker 不支持该disabled道具。见https://github.com/wojtekmaj/react-date-picker

根据 shaz 的建议，如果您想改用该组件，react-datepicker ( https://github.com/Hacker0x01/react-datepicker/blob/master/docs/datepicker.md ) 可以

Answer 3

试试这个。为我工作

const CustomInput = (props) => {
    return (
        <input
            className={[classes.TransparentInput, "uk-input"].join(" ")}
            onClick={props.onClick}
            value={props.value}
            type="text"
            readOnly={true}
        />
    )
}
<DatePicker
  customInput={<CustomInput />}
  name={'from'}
  value={values['from']}
  onChange={e => setFieldValue('from', moment(e).format('L'))}
 />

setFieldValue 来自 formik。您可以选择不使用 formik。你的选择。

Answer 4

作为一种 hacky 解决方法（不想使用另一个库），这对我有用：

在包含 DatePicker 的容器上添加一个禁用的类

.disabled {
  pointer-events: none;

  input {
    background: transparent;
    box-shadow: none;
    border: none;
  }
}

编辑：如果您想让该字段看起来像纯文本，则只需要输入样式。