2017-06-03 66 views
1

谁知道我的组件中的变更道具如何使用引用来响应js?如何在React js中设置道具使用引用js

<MyComponent 
    ref={'input1'} 
    name={'input1'} 
    label={interestsName} 
    disabled={ false} 
    onChange={this.myFunction}/> 

的onChange后,我打电话与

myFunction =()=>{console.log(this.rews[input1].props.disable);} 

我可能会改变使用道具没有裁判使用状态的功能?因为我有许多'15'组件,比如这个组件。谢谢。

+0

道具只是一个函数调用的参数进行管理,你不能改变他们,至少是一个不好的模式 –

回答

0

你不应该在这种情况下使用的裁判,你应该使用状态来改变你的孩子的道具:

class MainComponent extends React.Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     disable: false, 
    }; 
    this.onChange = this.onChange.bind(this); 
    } 

    onChange() { 
    this.setState({ disable: true }); 
    } 

    <MyComponent 
    name="input1" 
    label={interestsName} 
    disabled={this.state.disable} 
    onChange={this.onChange} 
    /> 
} 

<MyComponent>使用componentWillReceiveProps()检测新道具的价值。

+0

我使用这个组件的数组,如果我可以使用状态,我更改数组的所有组件单击。 – Trik

+0

对不起,我不明白你的问题? –

1

您不能更改子类的道具,更多请参考link

为了您的功能使用,您可以使用状态更改change事件的值。还有一件事你应该保持改变组件属性的逻辑应该保留在组件内。这将有助于我们为不同的组件维护不同的状态。

class MyComponent extends React.Component { 
    constructor(props) { 
    this.state = { 
    disable: props.disabled 
    }; 
    } 

    myFunction() { 
    console.log(this.state); 
    } 
} 

可以遍历上述成分,它可用于15次不同的状态可以为每一个元素