Question

我创建的内容的描述：从列表中添加/删除朋友。

概述： 在两种情况下，我会通过点击事件传递功能。

情况1： <button onClick = {this.handleAddFriend}>Submit</button>

情况2： <button onClick={() => props.onRemoveFriend(name)}>Remove</button>

分析： 该代码可以正常工作。但是，我的印象是，“如果您只是调用一种情况＃1中所示的方法，那么在渲染时，React将< strong>立即调用此函数。（使用匿名函数是防止这种情况的一种方法）“

我的问题： 鉴于我的理解，为什么情况不会情况＃1破坏了我的代码？

这是我的完整代码：

<!DOCTYPE html>
<html>
<head>
    <title> First React App</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head> 
<body>  
    <div id = 'app'></div>
    <script type = 'text/babel'>

        //Function Component: Does not manage it's own state
        function FriendsList(props) {
            return (
                <ul>
                    {props.list.map((name) => (
                        <li key = {name}>
                            <span>{name}</span>
                            <button onClick={() => props.onRemoveFriend(name)}>Remove</button>
                        </li>
                    ))}
                </ul>
            )
        }

        //Class Component: Manages it's own state
        class App extends React.Component {
            constructor(props) {
                //Invokes the constructor for the React Component Class(parent-class)
                super(props);

                //state now lives within the component
                this.state = {
                    friends: ['Jordyn', 'Mikenzi', 'Jake'],
                    input: ''
                }

                // "this" refers to an instance of the "App" component.
                console.log(this) 

                //You are "binding"/referencing the following method to "this" instance
                this.handleRemoveFriend = this.handleRemoveFriend.bind(this);
                this.handleAddFriend = this.handleAddFriend.bind(this);
                this.updateInput = this.updateInput.bind(this);

            }
            handleAddFriend() {
                this.setState((currentState) => {
                    return {
                        friends: currentState.friends.concat([this.state.input]),
                        input: ''
                    }
                })
            }
            handleRemoveFriend(name) {
                this.setState((currentState) => {
                    return {
                        friends: currentState.friends.filter((friend) => friend !== name)
                    }
                })
            }

            updateInput(e) {
                const value = e.target.value;
                this.setState({
                    input: value
                })
            }


            render() {
                return (
                    <div>
                        <input type = 'text'
                               placeholder = 'Type a new friend here!'
                               value = {this.state.input}
                               onChange = {this.updateInput}
                        />
                        <button onClick = {this.handleAddFriend}>Submit</button>                              
                        <FriendsList                                      
                            list = {this.state.friends}                    
                            onRemoveFriend = {this.handleRemoveFriend}>   
                        </FriendsList>                                    
                    </div>                                                
                    )
                }
        }

        ReactDOM.render(
            <App />,
            document.getElementById('app')
            );
    </script>
</body>

Answer 1

您只是传递函数，要调用它，您需要执行以下操作：

int

为什么在一种情况下而不在另一种情况下调用Render的onClick函数

1 个答案: