Question

有一个组件：

DatetimeFilter类扩展了组件{

constructor(props) {
    super(props);    
    this.changeFromTimeTaskEducation = this.props.changeFromTimeTaskEducation;
    this.changeToTimeTaskEducation = this.props.changeToTimeTaskEducation;
}

changeFromTimeTaskEducation = (event) => {
    // change value in parent
};

changeToTimeTaskEducation = (event) => {
    // change value in parent
};

render() {
    return (
                    <input onChange={this.changeFromTimeTaskEducation} className="filter_datetime_second_value"
                           type="datetime-local" value={this.props.fromTimeTaskEducation}/>
                    <input onChange={this.changeToTimeTaskEducation} className="filter_datetime_second_value"
                           type="datetime-local" value={this.props.toTimeTaskEducation}/>
    );
}

}

导出默认的DatetimeFilter;

当我尝试更改输入中的值时，出现异常：

Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

如何解决？

我尝试设置defaultValue，但仅初始化一次。

Answer 1

如果您认为必须有一个值，请将其设置为defaultValue并保持onChange的状态

<input onChange={this.changeFromTimeTaskEducation} className="filter_datetime_second_value"
                           type="datetime-local" defaultValue={this.props.fromTimeTaskEducation}/>
                    <input onChange={this.changeToTimeTaskEducation} className="filter_datetime_second_value"
                           type="datetime-local" defaultValue={this.props.toTimeTaskEducation}/>

Answer 2

实现一个OnChange函数，该函数调用父（prop）函数。您正在使用本地函数定义覆盖父级的函数。

这是一种执行所需操作的正确方法：

class DatetimeFilter extends Component {

    localFromTimeTaskEducation = (event) => {
      this.props.changeFromTimeTaskEducation(event.target.value); //Or whatever value you are trying to pass
    }

    localToTimeTaskEducation = (event) => {
      this.props.changeToTimeTaskEducation(event.target.value);
    }

    render() {
        return (
          <input 
            onChange={this.localFromTimeTaskEducation} 
            className="filter_datetime_second_value"
            type="datetime-local" 
            value={this.props.fromTimeTaskEducation}
          />

          <input 
            onChange={this.localFromTimeTaskEducation} 
            className="filter_datetime_second_value"
            type="datetime-local"
            value={this.props.toTimeTaskEducation}
          />
        );
    }
}
export default DatetimeFilter;

datetime-local在react组件中

2 个答案: