Question

所以我有3个反应组件1是整个对话框组件，标签组件和tabsContent组件。例如在标签内容中我有一个字段，当你写东西时，它改变你写的东西的标签名称..我有每次更改该字段时都会使用.forceUpdate来完成它从对话框组件调用函数并且它们具有.forceUpdate ..并且该字段与选项卡名称相同的对象绑定。问题是，如果我有10个字段，每当我更改字段时，它将调用forceUpdate，我不需要每次只调用1个字段。所以你可以给我一些方法来做到这一点？

window.DialogComponent = react.createClass(
    componentDidMount(){
        this.props.obj...;
    }

    onChange:function(){
        this.forceUpdate()
    }

    render:function(){
        return(
            <dialogTab obj={this.props.obj} />
            <dialogContent obj={this.props.obj} onChange={this.onChange} />    
        )
    }
)

dialogTabComponent =react.createClass(

     render:function(){
         return(
             <span>this.props.obj.name</span>    
         )
     }
)

dialogTabContent = react.createClass(
     onChange(){
         this.props.obj.name = value;
         this.props.onChange();
     }

    render:function(){
        return(
            <input text.... onChange = {this.onChange}>    
        )
    }
)

Answer 1

如果我理解正确，您的DialogComponent包含两个子组件（DialogTab和DialogContent）。

DialogContent包含一个输入，无论何时更改，都会更新其兄弟组件DialogTab上的某个值。所以基本上你需要communication between sibiling components。

您应该使用父组件中的状态并将父级（DialogComponent）中的道具传递给其子组件，这里有一个小提琴：https://jsfiddle.net/69z2wepo/62767/

祝你好运。

从字段中动态更改选项卡的名称

1 个答案: