Question

我有一个具有状态变量的react组件：

showEditor

当showEditor为false时，它应该只显示一个带有一些数字的div（最初showEditor为false）。如果这个状态变量为真，那么我的反应组件应该显示一个文本框和一个带有＆＃34; save＆＃34;的按钮。标签里面另一个div-making dissapear第一个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

周围的onClick={this.showNumericEditor}有一个div处理程序，因此当您按下保存按钮时，点击事件会冒泡并调用this.setState({showNumEditor: true})。

要解决此问题，您可以重新构建渲染，也可以在e.stopPropagation();开头调用saveCellInfo。另请注意，您的一些this.saveCellInfo来电未通过此活动。

另一种情况，当一个组件的状态发生变化但似乎该组件没有

1 个答案: