如何在 React js 中设置 props 使用 refs答案

【问题标题】：How to set props use refs in React js如何在 React js 中设置 props 使用 refs
【发布时间】：2017-11-04 17:48:16
【问题描述】：

谁知道我的组件中的 change props 如何在 react js 中使用 refs ？

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

在 onChange 之后我调用函数

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

我可以在没有使用状态的情况下更改道具使用引用吗？因为我有很多'15'组件，例如这个组件。谢谢。

【问题讨论】：

props 只是函数调用的参数，你不能改变它们，至少是一个不好的模式

标签： javascript reactjs meteor react-native ecmascript-6

【解决方案1】：

子类的道具不能更改，更多请参考link。

对于您的功能使用，您可以使用状态来更改更改事件的值。还有一件事你应该保留更改组件属性的逻辑应该保留在组件中。这将帮助我们为不同的组件维护不同的状态。

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

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

你可以对上面的组件进行迭代，它可以被使用15次，并且可以为每个元素管理不同的状态

【讨论】：

【解决方案2】：

在这种情况下你不应该使用 ref，你应该使用 states 来改变你的孩子道具：

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() 来检测新的道具值。

【讨论】：

我将数组与这个组件一起使用，如果我可以为此使用状态，我可以一键更改数组的所有组件。
抱歉我不明白你的问题？