React - 如何设置下拉菜单状态 onChange()？

Question

我正在尝试绑定下拉菜单的 onChange 事件以将值设置为选择。目前我可以传递一个引用来调用handleChange。但是，由于我不知道如何将 dropdownmenu 对象绑定到 this。我无法访问 this.state

也许我的代码结构需要转换为演示：http://www.material-ui.com/#/components/dropdown-menu

但是，如果我这样做，我将如何传入 documentList？

好困惑。 感谢您的支持。

import React from 'react';
import { ListGroup, Alert, Row, Col} from 'react-bootstrap';
import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import DropDownMenu from 'material-ui/DropDownMenu'


const handleChange = (event, index, value) =>
{
console.log("handle change (value) ", value);
console.log("handle change (event) ", event);
console.log("handle change (index) ", index);

//How do i set the state of the dropdown object?


}

export const widget = ({ documentList }) => (
documentList.length > 0 ? <Paper style={{ paddingTop: 16,
        paddingBottom: 16,
        marginTop: 3,
        }}>
                            <form style={{ padding: 30 }} className="add-update-form" onSubmit={() => false}>
                                <Row>
                                    <Col md={2}>
                                        <DropDownMenu value={2} onChange={handleChange} openImmediately={true}>
                                            <MenuItem value={1} primaryText="Starter" />
                                            <MenuItem value={2} primaryText="Mains" />
                                            <MenuItem value={3} primaryText="Drinks" />
                                        </DropDownMenu>
                                    </Col>
          </Row>

Answer 1

您编写的组件是一个无状态的函数式组件，它应该像普通函数一样工作。在这种情况下没有状态对象。您需要一个类构造函数才能访问组件中的状态对象。

import React from 'react';
import { ListGroup, Alert, Row, Col} from 'react-bootstrap';
import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import DropDownMenu from 'material-ui/DropDownMenu';


class Widget extends React.Component {
constructor(props) {
    super(props);
  }

handleChange(event, index, value) {
  console.log("handle change (value) ", value);
  console.log("handle change (event) ", event);
  console.log("handle change (index) ", index);
  //Set States

}

render() {
   const documentList = this.props.documentList;
   //ES6 object destructing
   // const { documentList } = this.props;
  return() {
    if(!documentList.length > 0) return;
    <div>
     <Paper style={{ paddingTop: 16,
        paddingBottom: 16,
        marginTop: 3,
        }}>
      <form style={{ padding: 30 }} className="add-update-form" onSubmit={() => false}>
          <Row>
              <Col md={2}>
                  <DropDownMenu value={2} onChange={handleChange} openImmediately={true}>
                      <MenuItem value={1} primaryText="Starter" />
                      <MenuItem value={2} primaryText="Mains" />
                      <MenuItem value={3} primaryText="Drinks" />
                  </DropDownMenu>
              </Col>
          </Row>
    </div>
  }
}
}

export default Widget;

---

这是 Widget.js 的当前版本

import React from 'react';
import { ListGroup, Alert, Row, Col} from 'react-bootstrap';
import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';
import Snackbar from 'material-ui/Snackbar';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import DropDownMenu from 'material-ui/DropDownMenu'
import Toggle from 'material-ui/Toggle';





class Widget extends React.Component {
    constructor(props) {
        super(props);
    }

    handleChange(event, index, value) {
        console.log("handle change (value) ", value);
        console.log("handle change (event) ", event);
        console.log("handle change (index) ", index);
        //Set States
    }

    styles = {
        block: {
            maxWidth: 250,
        },
        toggle: {
            marginBottom: 16,
        },
        thumbOff: {
            backgroundColor: '#ffcccc',
        },
        trackOff: {
            backgroundColor: '#ff9d9d',
        },
        thumbSwitched: {
            backgroundColor: 'red',
        },
        trackSwitched: {
            backgroundColor: '#ff9d9d',
        },
        labelStyle: {
            color: 'red',
        },
        customWidth: {
            width: 200,
        },
    };


    render() {
        const documentList = this.props.documentList;
        return () => {
            documentList.length > 0 ?
                <Paper style={{
                    paddingTop: 16,
                    paddingBottom: 16,
                    marginTop: 3,
                }}>
                    <form style={{padding: 30}} className="add-update-form" onSubmit={() => false}>
                        <Row>
                            <Col md={2}>
<DropDownMenu value={2} onChange={this.handleChange} openImmediately={true}>
                          <MenuItem value={1} primaryText="Starter" />
                          <MenuItem value={2} primaryText="Mains" />
                          <MenuItem value={3} primaryText="Drinks" />
                      </DropDownMenu>
                            </Col>
                            <Col md={2}>
                                <Toggle
                                    label="Dessert"
                                    labelPosition="right"
                                    style={this.styles.toggle}
                                />
                            </Col>
                        </Row>
                        <RaisedButton label="Save" primary={true} style={{marginRight: 15, marginTop: 15}} onClick=""/>
                    </form>
                </Paper> :
                <Alert bsStyle="warning">No stuff yet.</Alert>
        }

    }
}



Widget.propTypes = {
    documentList: React.PropTypes.array,
};

export default Widget;

Answer 2

不知道为什么，但设法让页面呈现。所以虽然我会分享解决方案......我认为这与 prp 类型有关，也许是我正在使用的 reat 版本......“react”：“^15.6.1”，可能会在我稍后升级花点时间看看会发生什么。但是页面呈现，所以我很高兴。只需要修复事件处理。

import React from 'react';
import { ListGroup, Alert, Row, Col} from 'react-bootstrap'; 
import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';
import Snackbar from 'material-ui/Snackbar';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import DropDownMenu from 'material-ui/DropDownMenu'
import Toggle from 'material-ui/Toggle';





export class OrderWidget extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            toggle: true,
        },

            this.styles = {
                block: {
                    maxWidth: 250,
                }
                ,
                toggle: {
                    marginBottom: 16,
                }
                ,
                thumbOff: {
                    backgroundColor: '#ffcccc',
                }
                ,
                trackOff: {
                    backgroundColor: '#ff9d9d',
                }
                ,
                thumbSwitched: {
                    backgroundColor: 'red',
                }
                ,
                trackSwitched: {
                    backgroundColor: '#ff9d9d',
                }
                ,
                labelStyle: {
                    color: 'red',
                }
                ,
                customWidth: {
                    width: 200,
                }
                ,
            }

    }


    handleChange(event, index, value) {
        console.log("handle change (value) ", value);
        console.log("handle change (event) ", event);
        console.log("handle change (index) ", index);
        //Set States

        this.state.setValue(value);
    }

    render() {
        return (
            <Paper style={{
                paddingTop: 16,
                paddingBottom: 16,
                marginTop: 3,
            }}>
                <form style={{padding: 30}} className="add-update-form" onSubmit={() => false}>
                    <Row>
                        <Col md={2}>
                            <DropDownMenu value={2} onChange={this.handleChange} openImmediately={true}>
                                        <MenuItem value={1} primaryText="Starter" />
                          <MenuItem value={2} primaryText="Mains" />
                          <MenuItem value={3} primaryText="Drinks" />
                            </DropDownMenu>
                        </Col>
                        <Col md={8}>
                            <TextField floatingLabelText="Units" hintText="Units" name="Units" ref="Units"
                                       key="Units" defaultValue="" fullWidth={false}/>
                            <TextField floatingLabelText="Price" hintText="Price" name="Price" ref="Price"
                                       key="Price" defaultValue="" fullWidth={false}/>
                        </Col>
                        <Col md={2}>
                            <Toggle
                                label="Side"
                                labelPosition="right"
                                style={this.styles.toggle}
                            />
                        </Col>
                    </Row>
                    <RaisedButton label="Save" primary={true} style={{marginRight: 15, marginTop: 15}}
                                  onClick=""/>
                </form>
            </Paper>


        );

    }

}

/*
Widget.propTypes = {
    documentList: React.PropTypes.array,
};
*/