Question

谁知道我的组件中的变更道具如何使用refs in react js？

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

在onChange之后我用

调用函数

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

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

Answer 1

您无法更改子级别的道具，有关详情，请参阅link。

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

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

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

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

Answer 2

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

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

如何在React js中设置道具使用refs

2 个答案: