Question

我有一个使用react-bootstrap中的ToggleButtonGroup的表单。我需要根据切换中选择的值来更改表单中的某些文本值。问题在于，在按钮上调用onChange时-我得到了切换开关的先前选定值，而不是新的值。

constructor(props) {
    super(props);  
    this.tradeInput = React.createRef();
}

handleChange() {
    console.log(this.tradeInput.current.props.value); // old value printed here
}

<ToggleButtonGroup type="radio" name="trade" defaultValue="BUY" ref={this.tradeInput} onChange={e => this.handleChange(e)}>
    <ToggleButton value="BUY">BUY</ToggleButton>
    <ToggleButton value="SELL">SELL</ToggleButton>
</ToggleButtonGroup>

有人可以建议如何解决此问题吗？

编辑：当我尝试读取引用中的值时，发生了非常奇怪的事情：

console.log(this.tradeInput.current)在current.props.value中显示了正确的更新值，但是如果我尝试使用完全相同的输入来打印console.log(this.tradeInput.current.props.value)，则会得到不同的结果（旧值）。

EDIT2：完整更新的代码

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

        this.state = { 
            validated: false,
            caps: 0,
            junk: 0,
            food: 0,
            trade: "BUY"
        };

        this.handleJunkChange.bind(this);
        this.handleFoodChange.bind(this);
        this.handleTradeChange.bind(this);
        this.updateCaps.bind(this);
        this.handleSubmit.bind(this);
    }

    handleSubmit(event) {
      ...
    }

    handleJunkChange(event) {
        this.setState({ 
            junk: event.target.value
        });
        this.updateCaps();
    }

    handleFoodChange(event) {
        this.setState({ 
            food: event.target.value
        });
        this.updateCaps();
    }

    handleTradeChange(event) {
        this.setState({ 
            trade: event.target
        });
        this.updateCaps();
    }

    updateCaps() {
        var capsInfo = 0;
        const junk = parseInt(this.state.junk);
        const food = parseInt(this.state.food);
        if (this.state.trade === "BUY") {
            capsInfo = (junk + food) * 2;
        } else if (this.state.trade === "SELL") {
            capsInfo = junk + food;
        };

        this.setState({ 
            caps: capsInfo
        });
    }

    render() {
        return <Card>
            <Card.Body>
                ...
                <Form 
                    id="resourceForm"
                    noValidate
                    validated={this.state.validated}
                    onSubmit={e => this.handleSubmit(e)}
                >
                            <InputGroup className="mb-3">
                                <FormControl
                                    name="junk"
                                    type="number"
                                    min={0}
                                    max={10}
                                    value={this.state.junk}
                                    onChange={e => this.handleJunkChange(e)}
                                />
                                <Form.Control.Feedback type="invalid">
                                    <Translate id="labels.resourceLimitExceeded" />
                                </Form.Control.Feedback>
                            </InputGroup>
                            <InputGroup className="mb-3">
                                <FormControl
                                    name="food"
                                    ref={this.foodInput}
                                    type="number"
                                    min={0}
                                    max={10}
                                    value={this.state.food}
                                    onChange={e => this.handleFoodChange(e)}
                                />
                                <Form.Control.Feedback type="invalid">
                                    <Translate id="labels.resourceLimitExceeded" />
                                </Form.Control.Feedback>
                            </InputGroup>
                            <InputGroup>
                                <FormControl
                                    type="number"
                                    disabled
                                    value={this.state.caps}
                                />
                            </InputGroup>
                            <ToggleButtonGroup type="radio" name="trade" defaultValue={this.state.trade} onChange={e => this.handleTradeChange(e)}>
                                <ToggleButton variant="outline-dark" value="BUY"><Translate id="labels.buy" /></ToggleButton>
                                <ToggleButton variant="outline-dark" value="SELL"><Translate id="labels.sell" /></ToggleButton>
                            </ToggleButtonGroup>
                </Form>
            </Card.Body>
        </Card>
    }
};

Answer 1

最后我找到了问题...试试这个

    handleTradeChange(event) {
     // trigger you updateCaps() after updated the current state.
        this.setState({ 
            trade: event.target
        },()=> this.updateCaps(););

    }

尝试此操作，您可以在任何使用this.state.tradeValue的位置访问切换按钮的当前值

constructor(props) {
    super(props); 
    this.state = {
      tradeValue : "BUY" 
    } 
    this.tradeInput = React.createRef();
}

handleChange(value) {
    this.setState({ tradeValue : value})
}

<ToggleButtonGroup type="radio" name="trade" value={this.state.tradeValue}  onChange={this.handleChange}>
    <ToggleButton value="BUY">BUY</ToggleButton>
    <ToggleButton value="SELL">SELL</ToggleButton>
</ToggleButtonGroup>

React-bootstrap ToggleButtonGroup在调用

1 个答案: