React onChange Метод не изменяет состояние объекта - PullRequest
Новая
       9

React onChange Метод не изменяет состояние объекта

0 голосов
/ 12 декабря 2018

Я использую реагирующее средство выбора даты, я хочу создать его как компонент выбора даты, который я могу использовать на каждой части своих страниц.У меня есть проблема с методом onchange, потому что во время изменения состояния он не знает столбец, в котором он изменяется.Я что-то упустил в методе onchange.Когда я выбираю дату, появляется ошибка: состояние всегда пустое. Это результаты в моей консоли.

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}

/>

Ответы [ 2 ]

0 голосов
/ 12 декабря 2018

Если вы хотите передать параметры в функцию, вы должны связать или вызвать функцию обратного вызова!

onChange = {this.onChange} // Неправильный путь

Решение: 

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

или 

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

Один из них должен работать на вас!

0 голосов
/ 12 декабря 2018

Вы связали метод onChange в своем конструкторе?Вот так: 

constructor(props) {
  super(props);
  this.onChange = this.onChange.bind(this);
}

Я убрал некоторые другие вещи, чтобы сосредоточиться только на привязке событий.Вот еще большая разбивка форм и тому подобного в их документации: https://reactjs.org/docs/forms.html

Кроме того, это очень придирчиво, но handleChange будет более семантическим, чем onChange, для такого типа ситуаций.

...