动态反应选择菜单组件

我是React的“new-ish”。我正在尝试创建一个自定义组件，它将在选择菜单中显示项目列表。用户将能够从菜单中选择一个选项。一旦完成，点击下面的“添加”按钮，将显示另一个选择菜单，由第一个选择菜单的其余未选定选项填充。随后每次点击添加按钮后，理想情况下都会继续发生，直到只剩下一个选项。动态反应选择菜单组件

我已经创建了下面的代码来显示初始选择菜单，但是我无法用我的头绕着它走。

import React from 'react'; 
import { Grid, Row, Col, Button, FormGroup, ControlLabel, FormControl } from 'react-bootstrap'; 

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

     this.props = props; 
     this.state = { 
      fruits: [ 
       { selected: false, fruit: 'Banana', value: 'banana' }, 
       { selected: false, fruit: 'Apple', value: 'apple' }, 
       { selected: false, fruit: 'Orange', value: 'orange' } 
      ] 
     }; 

     this._handleClick = this._handleClick.bind(this); 
    } 

    _handleClick(event) { 
    } 

    _handleChange(option) { 
     // this.setState({ value: option, selected: true }); 
    } 

    render() { 
     return (
      <div> 
       <Grid> 
        <Row> 
         <SelectMenu data={this.state.fruits} onChange={this._handleChange.bind(this)} /> 
        </Row> 
        <Row> 
         <Col xs={12}> 
          <p> 
           <Button href="#" onClick={this._handleClick}>Add</Button> 
          </p> 
         </Col> 
        </Row> 
       </Grid> 
      </div> 
     ); 
    } 
} 

class SelectMenu extends React.Component<any, any> { 
    constructor(props) { 
     super(props); 

     this.state = { 
      value: undefined 
     }; 
    } 

    _handleChange(event) { 
     this.props.onChange(event.target.value); 
    } 

    render() { 
     const unselected = this.props.data.filter(fruit => fruit.selected == false); 

     return (
      <Col sm={3}> 
       <FormGroup controlId="formControlsSelect"> 
        <ControlLabel>Select</ControlLabel> 
        <FormControl componentClass="select" placeholder="select" onChange={this._handleChange.bind(this)} value={this.state.value}> 
         {this.props.data.map((option, index) => { 
          return <option key={index} value={option.value}>{option.location}</option>; 
         })}; 
        </FormControl> 
       </FormGroup> 
      </Col> 
     ); 
    } 
} 

export default App;

这是行不通的。我希望有人能够开创我创造这条道路的正确道路。

来源

2016-09-01 addam

当你说“不工作”时，你可以详细说明你的意思吗？你将'_handleChange'传递给'onChange'，它被调用，但'setState'在'_handleChange'函数中被注释掉了。你可以偶然创建一个jsFiddle吗？ – aug

当我说它不起作用时，我的意思是它不以我想要的方式工作。它确实呈现select元素，但是_handleChange函数，即使setState方法未注释，也不会帮助我查找的功能。 – addam

所以，这是一个相当广泛的问题，因此我的回答可能不完全是你要找的。在您为我提供的代码中会出现几次到几次错误的错误，这些错误会使您的代码正常工作，但我会给您一些示例代码，可能会让您走上正轨。

首先，这里是添加要渲染的新项目的示例。注意按钮是如何将项目添加到状态的。

class AddingItems extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     items: [], 
    }; 
    } 
    handleClick(){ /*Add items to state*/ 
    let newItem = <div>Item</div>; 
    this.setState({items: this.state.items.concat([newItem])}); 
    } 
    render(){ 
    return <div> 
     {this.state.items /*render items from state*/} 
     <button onClick={this.handleClick.bind(this)}>Add item!</button> 
    </div>; 
    } 
}

其次，我建议从阵列到地图改变你的“数据级”，水果会再看看这样的事情：

fruits: { 
      banana: { selected: false, fruit: 'Banana'}, 
      apple: { selected: false, fruit: 'Apple'}, 
      orange: { selected: false, fruit: 'Orange'} 
     }

这样，你可以通过访问它们this.state.fruits.banana或this.state.fruits["banana"]。

来源

2016-09-02 11:41:12 Petter

动态反应选择菜单组件

回答

相关问题