在更改方法上使用输入子级反应控制父级状态

Posted

技术标签:

【中文标题】在更改方法上使用输入子级反应控制父级状态【英文标题】:React control parent state with input child on change method 【发布时间】:2017-05-24 02:49:28 【问题描述】:

我有以下:

import React from 'react';
import render from 'react-dom';

class TShirt extends React.Component 
    render () 
        return <div className="tshirt">this.props.name</div>;
    


class FirstName extends React.Component 
    constructor(props) 
        super(props);
        this.state = 
            submitted: false
        ;
    
    getName () 
        var name = this.refs.firstName.value;
        this.setState( submitted: true , function() 
          this.props.action(name);
        );
    
    render () 
        return (
            <div>
                <h2>tell us your first name</h2>
                <form>
                    <input 
                        type="text"
                        ref="firstName"
                        onChange=this.getName.bind(this)
                    />
                    <div className="buttons-wrapper">
                        <a href="#">back</a>
                        <button>continue</button>
                    </div>
                </form>
            </div>
        );
    


class Nav extends React.Component 
    render () 
        return <p>navigation</p>;
    


class App extends React.Component 
    constructor(props) 
        super(props);
        this.state = 
            name: ''
        ;
    
    getName (tshirt) 
        this.setState( name:tshirt )
    
    render () 
        return (
            <section>
                <Nav />
                <TShirt name=this.state.name />
                <FirstName action=this.getName />
            </section>
        );
    


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

我正在尝试使用来自“FirstName”组件的 onChange 方法(使用道具)的值来更新“TShirt”组件。

我在包装器中有一个整体状态来控制一切,但是当我开始输入名称 insdie 时,我得到了这个错误:

未捕获的类型错误:this.setState 不是函数

指:

getName (tshirt) 
    this.setState( name:tshirt )

【问题讨论】:

OnClick Event binding in React.js的可能重复 【参考方案1】:

您必须将getName 函数绑定到this

在你的构造函数中放置

this.getName = this.getName.bind(this);

你的构造函数应该看起来像

constructor(props) 
    super(props);
    this.state = 
        name: ''
    ;
    this.getName = this.getName.bind(this);

【讨论】:

这是正确的,但你也可以使用 ES6 胖箭头函数,它会自动绑定 this,如 getName (tshirt) =&gt; ...

以上是关于在更改方法上使用输入子级反应控制父级状态的主要内容,如果未能解决你的问题,请参考以下文章

在不改变状态、道具或父级的情况下反应子级渲染

使用图像的 SRC 将子级传递给父级时出现问题。反应 JS

反应表单错误将类型文本的受控输入更改为不受控制

React 父/子状态更改设计问题

如何将组件的状态传递给父级?

以角度将指令/输入传递给孩子的反应方式是啥?