另一種情況是組件的狀態發生變化，但組件似乎沒有

Question

我有一個帶有狀態變量的react組件：

showEditor

當showEditor為false時，應該只顯示其中有一些數字的div（最初showEditor為false）。 如果此狀態變量為true，則我的react組件應該在另一個div內顯示一個文本框和一個帶有“保存”標簽的按鈕-使第一個div消失並帶有數字-。 此文本框將用於更改號碼。 對於第一個div（僅顯示數字的div），我定義了：

<div onClick={this.showEditorProc}>
    { this.state.showEditor ?
        <div ....>
            { just the numeric value }
        </div>
        :
        <div ....>
            textBox
            <button onClick={save and make show Editor false}>
                Save
            </button>
        </div>
    </div>

函數this.showEditorProc會將showEditor變量的狀態修改為true，並且將顯示保存按鈕和文本框組件（也在另一個div內）。 我創建了一個函數，如果單擊保存按鈕，它將執行。 此函數將showEditor變量修改為false，但是，我看不到帶有數字值的div。 相反，我仍然看到帶有保存按鈕的文本框。 還有其他我可能會想念的東西嗎？ 這是我組件的代碼：

import React from 'react';
import ReactDOM from 'react-dom';
import NumberFormat from 'react-number-format';

export class NumericBox extends React.Component {
    constructor() {
        super();

        this.state = {
            enteredValue: '',
            showNumEditor: false,
            index: ''
        };
        this.showNumericEditor = this.showNumericEditor.bind(this);
        this.handle_enteredValue_change = this.handle_enteredValue_change.bind(this);
        this.saveCellInfo = this.saveCellInfo.bind(this);
        this.loadBasicInformation = this.loadBasicInformation.bind(this);
    }


    saveCellInfo(e){
        alert(this.state.index);

        /*  cellAuxParams = new Map([['updateCellValue', this.state.updateCellValue]]); */

        console.log('numericBox.js>saveCellInfo>cellAuxParams= ------------------------------------------------ ' + 28);
        console.log(this.props.cellAuxParams);

        var f = this.props.cellAuxParams.get('updateCellValue');

        this.setState({showNumEditor: false}, () => f(this.state.Index, '77'));
    }

    handle_enteredValue_change(values) {
        const {formattedValue, value} = values;
        // formattedValue = $2,223
        // value ie, 2223

        this.setState({enteredValue: value});
    }

    showNumericEditor()
    {
        this.setState({showNumEditor: true})
    }


    loadBasicInformation()
    {
        this.setState({enteredValue: this.props.enteredValue,
            index: this.props.index
        });
    }

    componentDidMount(){
        this.loadBasicInformation();
    }

    componentWillReceiveProps(nextProps){
        alert(nextProps.enteredValue);
        this.setState({enteredValue: nextProps.enteredValue}, () => this.loadBasicInformation());
    }

    render() {
        const table4controls = {
            display: 'table',
            width: this.props.style.width,
            backgroundColor: 'white',
            border: '0px solid #666666',
            borderSpacing: '0px',
            paddingBottom: '0em',
            paddingTop: '0em'
        };

        const table4controls_RowStyle = {
            display: 'table-row',
            width: 'auto',
            clear: 'both',
            borderBottom: '5px'
        };

        const table4controls_ColsStyleA = {
            float: 'left',
            display: 'table-column',
            width: '60px',
            backgroundColor: 'white'
        };

        const table4controls_ColsStyleB = {
            float: 'left',
            display: 'table-column',
            width: '20px',
            backgroundColor: 'white'
        };

        const table4controls_ColsStyleC = {
            float: 'left',
            display: 'table-column',
            width: '20px',
            backgroundColor: 'white'
        };

        const btnStyle={

        };

        return (
            <div onClick={this.showNumericEditor}>
                { this.state.showNumEditor ?
                    <div style ={table4controls}>
                        <div style={table4controls_RowStyle}>
                            <div style={table4controls_ColsStyleA}>
                                <NumberFormat style={{width: '60px'}}
                                              value={this.state.enteredValue}
                                              thousandSeparator={true}
                                              prefix={this.props.prefix}
                                              onValueChange={this.handle_enteredValue_change}
                                />
                            </div>

                            <div style={table4controls_ColsStyleB}>
                                <button style={btnStyle} onClick={() => this.saveCellInfo(this.state.index)}>
                                    &#x25B2;
                                </button>
                                <button style={btnStyle} onClick={() => this.saveCellInfo(this.state.index)}>
                                    &#x25BC;
                                </button>
                            </div>

                            <div style={table4controls_ColsStyleC}>
                                <button style={btnStyle} onClick={(e) => {this.saveCellInfo(e, this.state.index)}}>
                                    Save
                                </button>
                            </div>
                        </div>
                    </div>
                    :
                    <div syle={table4controls_ColsStyleA}>
                        {this.state.enteredValue}
                    </div>
                }
            </div>
        );
    }
}

Answer 1

您在周圍的div上具有onClick={this.showNumericEditor}處理程序，因此，當您按下保存按鈕時，單擊事件會冒泡並調用this.setState({showNumEditor: true}) 。

要修復它，您可以重組渲染或調用e.stopPropagation(); 在saveCellInfo 。 另請注意，您的某些this.saveCellInfo調用未傳遞事件。