Состояние пусто в реакции на визуализацию - PullRequest
Новая
       6

Состояние пусто в реакции на визуализацию

0 голосов
/ 09 мая 2018

Я новичок, чтобы реагировать JS. Проблема заключается в том, что при установке значения состояния в пункте меню и доступе к ним выдается пробел, а ручная установка значения работает нормально. этот фрагмент кода у меня есть. 

    //class definition
        class DowntimeAcknowledgeComment extends React.Component{
         constructor(props){
                super(props);
         this.state = {
                    comment: '',
                    startTime : Datetime.moment(),
                    endTime   : Datetime.moment().add(2, 'h'),
                    ...
        };
         //functon binding
        this.handleChange = this.handleChange.bind(this);
        }
        //handle change function
        handleChange(event, index, value){
                        this.setState({value: value});
            }

//render function
     render(){

        <div className="inline-block ">
                          <div className="width-80px margin-4px">Downtime for:</div>
                            <MuiThemeProvider >
                                <SelectField  value={this.state.value}  onChange={this.handleChange} >
                                      <MenuItem defaultValue={this.state.endTime} primaryText="2 Hours" />
                                      <MenuItem value={this.state.startTime} primaryText="8 Hours" />
                                      <MenuItem value="manual" primaryText="Manual"/>
                                </ SelectField>
                                </ MuiThemeProvider>

    <p>hello there {this.state.startTime}</p>
                    </div>

Ответы [ 3 ]

0 голосов
/ 09 мая 2018

Ваш обработчик событий принимает два дополнительных аргумента, которые он не получит, поскольку обработчики событий (включая Reacts ') получают только один аргумент - объект события.

Тем не менее вы можете получить value информацию из этого объекта события, например: 

handleChange(event) {
  this.setState({ value: event.target.value });
}

Что по совпадению имитирует один из примеров React для форм .

0 голосов
/ 09 мая 2018

На основании документации здесь , SelectField не имеет defaultValue свойств, используйте value вместо. 

<SelectField  value={this.state.value}  onChange={this.handleChange} >
    <MenuItem value={this.state.endTime} primaryText="2 Hours" />
    <MenuItem value={this.state.startTime} primaryText="8 Hours" />
    <MenuItem value="manual" primaryText="Manual"/>
</ SelectField>

Кроме того, вы можете установить начальное значение value, учитывая, что значение по умолчанию совпадает с endTime

this.state = {
  comment: '',
  startTime: Datetime.moment(),
  endTime: Datetime.moment().add(2, 'h'),
  value: Datetime.moment().add(2, 'h')
}

Ваша handleChange функция должна быть: 

handleChange = (event, index, value) => this.setState({value});

с использованием функции стрелки.

0 голосов
/ 09 мая 2018

defaultValue недоступно для материала-интерфейса SelectField

изменить это на value

<MenuItem value={this.state.endTime} primaryText="2 Hours" />

Если вы хотите, чтобы значение по умолчанию выбрано как 2 часа, установите состояние value, такое же как endTime

this.state = {
    comment: '',
    startTime: Datetime.moment(),
    endTime: Datetime.moment().add(2, 'h'),
    value: Datetime.moment().add(2, 'h')
    ...
};

Надеюсь, это поможет

...