javascript - ReactJS:无法在输入字段中输入内容

Question

我开始学习 react 并下载并遵循互联网上的任何教程。我正在尝试建立 friend 列表。
我有树组件，

friend 容器:

import React from 'react';
import AddFriend from './add_friend.jsx'
import ShowList from './show_list.jsx'

class FriendsContainer extends React.Component {

    constructor() {
        this.state = {
            friends: ['Jake Lingwall', 'Murphy Randall', 'Merrick Christensen']
        }
    }

    addFriend(friend) {
        this.setState({
            friends: this.state.friends.concat([friend])
        });
    }

    render() {
        return (
            <div>
                <h3> Add your friend to friendslist </h3>
                <AddFriend addNew={this.addFriend}/>
                <ShowList names={this.state.friends}/>
            </div>
        )
    }
}

export default FriendsContainer;

添加好友:

import React from 'react';

class AddFriend extends React.Component {

    constructor() {
        this.state = {newFriend: ''};
    }

    updateNewFriend(e) {
        this.setState({
            newFriend: e.target.value
        })
    }

    handleAddNew() {
        this.props.addNew(this.state.newFriend);
        this.setState({
            newFriend: ''
        });
    }

    render() {
        return (
            <div>
                <input type="text" value={this.state.newFriend} onChange={this.updateNewFriend}/>
                <button onClick={this.handleAddNew}>Add Friend</button>
            </div>
        )
    }
}

AddFriend.propTypes = { addNew: React.PropTypes.func.isRequired };

export default AddFriend;

显示列表:

import React from 'react';

class ShowList extends React.Component {

    render() {
        var listItems = this.props.names.map((f, i) => <li key={i}>{f}</li>);
        return (
            <div>
                <h3>Friends</h3>
                <ul>
                    {listItems}
                </ul>
            </div>
        )
    }
}

ShowList.defaultProps = { names: [] };


export default ShowList;  

和app.jsx

import React from 'react';
import FriendsContainer from './components/friends_container.jsx';

window.React = React;

React.render(<FriendsContainer />, document.body);

正如你在代码中看到的，我使用 es6 和 babel 作为转编译器。
我的问题是，我无法在输入字段中输入任何字母来将新 friend 添加到 friend 列表中。我做错了什么？

Answer 1

在 updateNewFriend 方法的上下文中，this 指的是窗口对象，而不是当前的组件实例。您需要先绑定(bind)该方法，然后再将其作为 onChange 事件处理程序传递。请参阅Function::bind .

您有两个选择:

class AddFriend extends React.Component {

    constructor() {
        // ...
        this.updateNewFriend = this.updateNewFriend.bind(this);
        this.handleAddNew = this.handleAddNew.bind(this);
    }

}

或

class AddFriend extends React.Component {

   render() {
        return (
            <div>
                <input type="text" value={this.state.newFriend} onChange={this.updateNewFriend.bind(this)}/>
                <button onClick={this.handleAddNew.bind(this)}>Add Friend</button>
            </div>
        )
    }

}

请记住，Function::bind 返回一个新函数，因此每次渲染组件时，render 中的绑定(bind)都会创建一个函数，尽管对性能的影响可以忽略不计.