Question

我已经得到了这个小组件，应该在每次更改时发布到服务器：

class SelectElement extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            optionList: []
        };
    }

    finalize() {
        // this means "window" in this case... so all the code below barfs:
        let key = this.props.inputName;
        let val = this.state.text;
        let postObj = {};
        postObj[key] = val;
        console.dir(postObj);
        $.post($.endPoints.saveCallField, postObj).done(function (response) {
            console.dir(response);
        });
    }

    render() {
        this.props.options.forEach(option =>
            this.state.optionList.push(<OptionElement value={option} text={option }/>)
        );
        return (
            <React.Fragment>
                <select className="form-control callField" name={this.props.inputName}
                        onChange={this.finalize}>
                    {this.state.optionList}
                </select>
            </React.Fragment>
        );
    }
}

我无法访问＆＃34;这个＆＃34;在哪里＆＃34;这个＆＃34;是SelectElement本身。我需要国家和道具。我怎么才能得到它？

Answer 1

使用以下其中一项：

this.finalize = this.finalize.bind(this);
onChange={this.finalize.bind(this)}
onChange={e => this.finalize(e)}
finalize = () => {};

您可以阅读有关优缺点的更多信息here。

Answer 2

看起来你已经确定了这个问题。调用finalize()方法时，this绑定到窗口。

您可以通过在构造函数中绑定函数来解决此问题。例如：

    constructor(props) {
            super(props);
            this.state = {
                optionList: []
            };
            this.finalize = this.finalize.bind(this);
        }

在构造函数中绑定通常比在render方法中绑定更好，因为如果在render方法中调用bind，则每次都生成一个新函数。

有关详细信息，请查看以下内容：https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56

如何访问＆＃34;这个＆＃34;来自组件方法

2 个答案: