동적 반응 선택 메뉴 구성 요소

Question

나는 반응 할 "새로운 것"입니다. 선택 메뉴에 항목 목록을 표시하는 사용자 지정 구성 요소를 만들려고합니다. 사용자는 메뉴에서 옵션을 선택할 수 있습니다. 완료되면 그 아래에 "추가"버튼이 있는데,이 버튼을 클릭하면 첫 번째 선택 메뉴의 나머지 선택되지 않은 옵션이 채워진 다른 선택 메뉴가 표시됩니다. 추가 옵션이 하나만 남을 때까지 추가 버튼을 클릭 할 때마다이 작업이 이상적으로 계속됩니다.

초기 선택 메뉴를 표시하는 코드를 만들었지 만 어디로 가야할지 고민하고 있습니다.

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; 

이것은 작동하지 않습니다. 나는 누군가가 이것을 창조하는 올바른 길에서 나를 시작하기를 바라고 있습니다.

Answer 1

따라서이 질문은 다소 포괄적 인 질문입니다. 따라서 제 대답은 당신이 찾고있는 것과 정확하게 다를 수 있습니다. 그리고 코드에 몇 가지 실수가있어 코드가 작동하도록 특정 변경 사항을 제공하기 위해 제공 한 코드에서 올바르게 추적 할 수있는 몇 가지 예제 코드를 제공합니다.

먼저 렌더링 할 새 항목을 추가하는 예입니다. 버튼이 항목을 상태에 추가하는 방법에 유의하십시오.

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"]입니다.