时间戳

首页 > 解决方案 > 反应js渲染功能中的状态为空白

reactjs - 反应js渲染功能中的状态为空白

问题描述

我是反应 js 的新手。问题是在 menuitem 中设置状态值并访问它们时会出现空白，而手动设置值可以正常工作。这是我的代码片段。

    //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>

标签： reactjsmaterial-ui

解决方案

defaultValue在 material-ui 中不可用SelectField

将其更改为value

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

如果您希望默认 Selected 值为 2 小时时间，请将状态设置value为endTime

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

希望这会有所帮助

推荐阅读