Question

我是新来的反应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>

Answer 1

材料-ui 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')
    ...
};

希望这会有所帮助

Answer 2

您的事件处理程序接受两个不会收到的额外参数，因为事件处理程序（包括Reacts）只接收一个参数，即事件对象。

您仍然可以从该事件对象获取value信息，如下所示：

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

巧合地模仿了one of React's examples on forms。

Answer 3

根据文档here，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});

使用箭头功能。

在js渲染函数中，状态为空

3 个答案: