javascript - 我如何在react + this.props.onContactSubmit不是一个函数中漂亮地调用编辑函数

Question

我在 react 方面遇到一些问题，我想从 contactList 编辑联系人，但我一直错误 Uncaught TypeError: this.props.handleContactEditSubmit is not a function...

var ContactBox = React.createClass({
getInitialState: function () {
    return { data: [] };
},
loadContactsFromServer: function () {
    var xhr = new XMLHttpRequest();
    xhr.open('get', this.props.url, true);
    console.log(this.props.url);
    xhr.onload = function () {
        var data = JSON.parse(xhr.responseText);
        this.setState({ data: data });
    }.bind(this);
    xhr.send();
},
componentDidMount: function () {
    this.loadContactsFromServer();
    window.setInterval(this.loadContactsFromServer, this.props.pollInterval);
},
handleContactAddSubmit: function (contact) {
    var data = new FormData();
    data.append('name', contact.name);
    data.append('phoneNumber', contact.phoneNumber);
    data.append('adress', contact.adress);
    for (var pair of data.entries()) {
        console.log(pair[0] + ', ' + pair[1]);
    }
    console.log(this.props.submitUrl);
    var xhr = new XMLHttpRequest();
    xhr.open('Post', this.props.submitUrl, true);
    xhr.onload = function () {
        this.loadContactsFromServer();
    }.bind(this);
    xhr.send(data);
},
handleContactEditSubmit: function (contact) {
    var data = new FormData();
    data.append('id', contact.phoneNumber);
    data.append('name', contact.name);
    var xhr = new XMLHttpRequest();
    xhr.open('Post', this.props.editUrl, true);
    xhr.onload = function () {
        this.props.loadContactsFromServer();
    }.bind(this);
    xhr.send(data);
},
render: function () {
    return (
        <div className="contactBox">
            <h1>Contacts</h1>
            <ContactList data={this.state.data} editUrl="/contact/edit" handleContactSubmit={this.handleContactEditSubmit} />
            <ContactForm onContactSubmit={this.handleContactAddSubmit} />
        </div>
    );
}
});

我想编辑此类的联系人:

var Contact = React.createClass({
getInitialState: function () {
    return { name: '', id: this.props.id };
},
handleNameChange: function (e) {
    this.setState({ name: e.target.value });
},
rawMarkup: function () {
    var md = new Remarkable();
    var rawMarkup = md.render(this.props.children.toString());
    return { __html: rawMarkup };
},
handleSubmit: function (e) {
    e.preventDefault();
    var name = this.state.name.trim();
    var id = this.state.id;
    if (name == '') return;
    this.props.onContactSubmit({ name: name, id: id });
    this.setState({ name: '' });
},
render: function () {
    var md = new Remarkable();
    return (
        <form className="contact" onSubmit={this.handleSubmit}>
            <input type="text"
                   placeholder="Your name"
                   defaultValue={this.props.name}
                   onChange={this.handleNameChange} />
            <span dangerouslySetInnerHTML={this.rawMarkup()} />
            <input type="submit" value="Post" />
        </form>
    );
}
});

但是我像联系人列表一样显示此联系人，我认为这是问题，我不知道如何继承函数:handleContactSubmit。

var ContactList = React.createClass({
render: function () {
    var contactNodes = this.props.data.map(function (contact) {
        return (
            <Contact name={contact.name} id={contact.contactId} key={contact.contactid} onContactSubmit={this.handleContactSubmit}>
                {contact.phoneNumber}
            </Contact>
        );
    });
    return (
<div className="contactList">
    {contactNodes}
</div>
    );
}

});

Answer 1

您需要首先将函数绑定(bind)到组件，否则 handleSubmit 函数将绑定(bind)到表单:

this.handleSubmit = this.handleSubmit.bind(this);

通常在构造函数中完成

如果您像这样调用函数，也可以跳过绑定(bind):

onSubmit={ function(event) { return this.handleSubmit(event); } }

PS:我检查了你的代码的错误部分，但问题仍然是一样的。您需要首先将该函数绑定(bind)到您的组件:

this.handleContactEditSubmit = this.handleContactEditSubmit.bind(this);