Question

我是React的“新手”。我正在尝试创建一个自定义组件，它将在选择菜单中显示项目列表。用户可以从菜单中选择一个选项。完成后，在其下方有一个“添加”按钮，当单击时，将显示另一个选择菜单，该菜单由第一个选择菜单的其余未选择选项填充。理想情况下，随后每次单击“添加”按钮都会继续发生这种情况，直到只剩下一个选项。

我已经创建了以下代码，显示了初始选择菜单，但是我无法将头围绕在哪里。

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"]访问它们。

动态反应选择菜单组件

1 个答案: