反應 - 我如何設置下拉菜單狀態onChange（）？

我正在嘗試綁定下拉菜單的onChange事件以將值設置爲選擇。此刻我可以傳遞一個引用來調用handleChange。但是，因爲我不知道如何將下拉菜單對象綁定到這個。我無法訪問this.state反應 - 我如何設置下拉菜單狀態onChange（）？

也許我的代碼結構需要轉移到類似的演示：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>

來源

2017-09-08 Kelvin U

，你寫的是一個無狀態的功能組件，這是應該的工作就像一個正常功能的組件。在這種情況下沒有狀態對象。您需要一個類構造函數才能訪問組件中的狀態對象。

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;

來源

2017-09-08 02:01:25

我從概念上得出這個結論。雖然此代碼不起作用。即使在添加表單和紙張的缺失結束標記之後。帶空白網站的末端和此錯誤：應該提供一個子組件來構建更高級的容器 –

我希望您對自己的工作有很好的理解。這應該解決你的setState問題。您在容器組件中導入此組件，並且它應該工作得很好，除非您做錯了什麼 –

未捕獲的錯誤：應提供一個用於構建較高階容器的子組件。試圖弄清楚......我確信我正在做一些沒有道理的事情。 –

都沒有得到一個線索，爲什麼，而是設法讓網頁渲染。所以雖然我會分享解決方案.....我認爲這與prp類型有關，可能是我使用的reat版本......「反應」：「^ 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, 
}; 
*/

來源

2017-09-08 16:15:36

奇怪，我不能從裏面handleChange訪問 –

反應 - 我如何設置下拉菜單狀態onChange（）？

回答

相關問題