Question

我正在使用react-date-picker，我想将其创建为日期选择器组件，可以在页面的每个部分使用。我遇到的问题是onchange方法，因为在状态更改时，它不知道要更改的列。我在onchange方法中丢失了一些东西。选择日期时，错误是get，状态始终为空。这是控制台中的结果。

21/12/2018

export class DatePickerNew extends React.PureComponent<IIDateTimeProps, any> 
{
    classes: string[];
    constructor(props: IIDateTimeProps) {
        super(props);
        this.state = {
            dirty: false,
            valid: false,
            validated: false,
            maxLength: this.props.maxLength || 250,
            minLength: this.props.minLength || 1,
            minNumber: this.props.minNumber || 0,
            maxNumber: this.props.maxNumber || 999999999999999,
            type: "date",
            validationMessage: "",
            selected:""

        } 
    }
    onChange = date => {
        const result = Validation.inputValidation(date, this.state);
        //date = DateTime.parse(date, DateTime.dateOutPutFormat);
        this.setState({
            validated: true,
            valid: result.state,
            dirty: true,
          selected: moment(date).format('DD/MM/YYYY').toString(),
          value:this.state.selected

        });
        console.log(this.state.value)
        console.log(this.state.selected)
      };

render() {
        this.classes = this.props.classes || [];

        return (
            <ErrorBoundary errorMessage="Error rendering DatePicker">

                  <DatePick

                    id={this.props.id}
                    name={this.props.name}
                    title={this.props.title}  
                    required={this.props.required}

                    value={this.state.selected}
                    onChange={this.onChange}

                    peekNextMonth
                    showMonthDropdown
                    showYearDropdown
                    dropdownMode="select"
                    type="text"
                    placeholderText="DD/MM/YYYY"
                    />


            </ErrorBoundary>);
    }
}

这就是我在另一个组件中的称呼方式

<DatePickerNew 
id="holidayDate" 
title="Holiday Date" 
label="Holiday Date"
type="text"
required={true} 
name="holidayDate"
isClearable={true}

/>

Answer 1

当您要将参数传递给函数时，必须绑定或调用回调函数！

onChange = {this.onChange} //错误的方式

解决方案是：

onChange={() => this.onChange(date)} //The most used way!

或

onChange={this.onChange.bind(this,date)}

其中一个应该为您工作！

Answer 2

您是否在构造函数中绑定了onChange方法？像这样：

我删除了其他一些内容，只是专注于事件绑定。这也是表单及其文档的更大分类：https://reactjs.org/docs/forms.html

此外，这是超级挑剔，但对于这种情况，handleChange比onChange更具语义。

反应onChange方法不更改对象的状态

2 个答案: