Question

我的网络应用程序的一部分提供了用于设置模式变量的UI组件。该模式是从可能的选项列表中选择的，用户应该一直看到当前选择的模式。该应用程序的其他部分也可能会更改模式，这应该更改用户看到的模式。

我使用create-react-app和react-bootstrap 1.0.0-beta.6 <Form.Control as="select">组件来实现这一点。当用户从组件的选项列表中选择模式时，该组件正常工作，但是当代码中其他地方发生更改时，该更改不会传播到Form.Control组件。

我制作了一个显示问题的最小示例代码。可以从git@github.com:tyhmakyselee/formtest.git克隆它。下面是App.js，其中包含所有js代码。 App.js使用功能<Form.Control>创建一个['a', 'b', 'c']组件，该组件具有三个可能的选项SelectMode，并创建一个<Button>组件，该组件的处理程序仅将模式更改为下一个列表中的一个循环发送。按钮处理程序将被调用，应用程序的状态将发生变化，但这不会显示在<Form.Control>元素中。

import React from 'react';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';

class App extends React.Component {
    modes = ['a', 'b', 'c'];

    constructor(props) {
        super(props);
        this.state = {
            currentMode: this.modes[2]
        };
    };

    setMode = (newMode) => {
        console.log('App.setMode', this.state.currentMode, newMode);
        this.setState({currentMode: newMode});
    };

    nextMode = (event) => {
        const index = this.modes.indexOf(this.state.currentMode);
        const newMode = this.modes[(index+1) % this.modes.length];
        console.log('App.nextMode', this.state.currentMode, newMode);
        this.setState({currentMode: newMode});
    };

    render() {
        return (
            <div>
              <SelectMode
                modes={this.modes}
                currentMode={this.state.currentMode}
                handleChange={this.setMode}
              />
              <Button
                onClick={this.nextMode}>
                Next mode
              </Button>
            </div>
        );
    };
}

const SelectMode = (props) => {
    console.log('SelectMode', props);
    return (
        <Form>
          <Form.Control
            as="select"
            onChange={event => props.handleChange(event.target.value)}
            value={props.currentMode}>
            {props.modes.map(m => <option key={m} value={m}>{m}</option>)}
          </Form.Control>
        </Form>);
};

export default App;

如何通过Button处理程序更改模式，以传播到Form.Control组件？

如何获取react-bootstrap v1.0.0以更新Form.Control从包含组件中选择的值？

0 个答案: