ReactJS：无法输入输入字段

Question

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

friends_container:

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;

add_friend:

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;

show_list:

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 作为转换编译器。
我的问题是，我无法在输入字段中键入任何字母来将新朋友添加到朋友列表中。我做错了什么？

Answer 1

在您的 updateNewFriend 方法的上下文中，this 指的是 window 对象而不是当前组件实例。您需要先绑定该方法，然后再将其作为 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 returns 是一个新函数，因此在 render 中绑定会在每次呈现组件时创建一个函数，尽管对性能的影响可以忽略不计。

ReactJS：无法输入输入字段

ReactJS: Can not type into input field

javascript

reactjs