javascript - 另一种情况是组件的状态发生变化但组件似乎没有变化

Question

我有一个带有状态变量的 react 组件:

showEditor

当 showEditor 为 false 时，它​​应该只显示一个 div，其中包含一些数字(最初 showEditor 为 false)。如果这个状态变量为真，我的 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}).

要修复此问题，您可以重新构建渲染或在 saveCellInfo 开头调用 e.stopPropagation();。另请注意，您的某些 this.saveCellInfo 调用未传递该事件。