Question

我有以下代码：

index.js

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            homeLink: "Home"
        };
    }

    onGreet() {
        alert("Hello!");
    }

    onChangeLinkName(newName) {
        this.setState({
            homeLink: newName
        });
    }

    render() {
        return (
            <div className="container">
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                        <Header homeLink={this.state.homeLink}/>
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                        <Home
                            name={"Max"}
                            initialAge={27}
                            greet={this.onGreet}
                            changeLink={this.onChangeLinkName.bind(this)}
                            initialLinkName={this.state.homeLink}
                        />
                    </div>
                </div>
            </div>
        );
    }
}

和 Home.js

export class Home extends React.Component {
    constructor(props) {
        super();
        this.state = {
            age: props.initialAge,
            status: 0,
            homeLink: props.initialLinkName
        };
    }

    onMakeOlder() {
        this.setState({
            age: this.state.age + 3
        });
    }

    onChangeLink() {
        this.props.changeLink(this.state.homeLink);
    }

    onHandleChange(event) {
        this.setState({
            homeLink: event.target.value
        });
    }

    render() {
        return (
            <div>
                <p>In a new Component!</p>
                <p>Your name is {this.props.name}, your age is {this.state.age}</p>
                <p>Status:  {this.state.status}</p>
                <hr/>
                <button onClick={() => this.onMakeOlder()} className="btn btn-primary">Make me older!</button>
                <hr/>
                <button onClick={this.props.greet} className="btn btn-primary">Greet</button>
                <hr/>
                <input type="text" value ={this.state.homeLink}
                       onChange={(event) => this.onHandleChange(event)}/>
                <button onClick={this.onChangeLink.bind(this)} className="btn btn-primary">Change Header Link</button>
            </div>
        );
    }
}

在onChange字段中写入内容并更新为input后，input标记中的state会被触发吗？当我在state字段中写一些内容时，我无法在Chrome中看到React Developer Tool扩展程序中的input更改。

当我点击按钮this.onChangeLink时，它会触发onChangeLink功能。 onChangeLink似乎没有任何参数，因为行李是空的，我仍然能够this.state.homeLink在this.props.changeLink函数内传递onChangeLink 。 this.props.changeLink index.js中的函数newName接受参数bind(this)。我想这就是bind(this)的用武之地。(event) => this.onChangeLink(event)做了什么？我可以用像SELECT CASE status WHEN 'VS' THEN 'validated by subsidiary' WHEN 'NA' THEN 'not acceptable' WHEN 'D' THEN 'delisted' ELSE 'validated' END AS STATUS FROM SUPP_STATUS这样的胖箭头函数重写它吗？

Answer 1

bind是Function.prototype中的一个函数，它返回一个绑定到当前this的函数对象。

onClick={this.onChangeLink.bind(this)}

此处onClick函数将作为当前上下文的处理程序传递。

arrow function根本不会创建新的this上下文。 this将引用函数定义的上下文。

箭头函数不会创建自己的这个上下文，所以它在封闭的上下文中有其原始含义。

onChange={(event) => this.onChangeLink(event)}

虽然onChangeLink未绑定，但在同一this上下文中的箭头函数内调用它。

所以..是的，您可以用胖箭头符号替换它以获得相同的效果。虽然你必须在这种情况下重写两次参数列表。

Answer 2

您不需要onChangeLink组件中的Home。您可以直接将值传递给App组件。

＆＃13;

class Home extends React.Component {
    constructor(props) {
        super();
        this.state = {
            age: props.initialAge,
            status: 0,
            homeLink: props.initialLinkName
        };
    }

    onMakeOlder() {
        this.setState({
            age: this.state.age + 3
        });
    }

    onHandleChange(event) {
        this.setState({
            homeLink: event.target.value
        });
    }

    render() {
    
        return (
            <div>
                
                <input type="text" value ={this.state.homeLink}
                       onChange={(event) => this.onHandleChange(event)}/>
                <button onClick={()=>this.props.changeLink(this.state.homeLink)} className="btn btn-primary">Change Header Link</button>
            </div>
        );
    }
}

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            homeLink: "Home"
        };
    }

    onGreet() {
        alert("Hello!");
    }

    onChangeLinkName(newName) {
        this.setState({
            homeLink: newName
        });
    }

    render() {
    console.log(this.state)
        return (
            <div className="container">
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                        
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                        <Home
                            name={"Max"}
                            initialAge={27}
                            greet={this.onGreet}
                            changeLink={this.onChangeLinkName.bind(this)}
                            initialLinkName={this.state.homeLink}
                        />
                    </div>
                </div>
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("app"))

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

在ReactJS中绑定（this）并将onChange更新为状态

2 个答案: