如何通过ref选择器操作属性

Question

我想给具有disabled的元素添加一个属性ref="formButton"，我尝试了一下，但似乎没有用：

React.findDOMNode(this.refs.formButton).attr('disabled')
this.refs.formButton.attr('disabled')

Answer 1

为此，请使用标准的DOM API，例如：

React.findDOMNode(this.refs.formButton).setAttribute('disabled', true)

或者，如果您想使用jquery：

$(React.findDOMNode(this.refs.formButton)).attr('disabled')

Answer 2

执行此操作的“React”方法是在渲染方法中控制按钮的disabled属性，并使用组件的状态来跟踪它。

例如：

var myComponent = React.createClass({

  getInitialState: function() {
    return { disabled: false };
  },

  disableFormButton: function() {
    this.setState({ disabled: true });
  },

  render() {
    return (
      <div>
        ...
        <button
          disabled={this.state.disabled}
          onClick={this.disableFormButton.bind(this)}>
          Disable
        </button>
      </div>
    );
  }
});

JSF 在这里

请注意，您不再需要ref，因为您不需要从render方法外部访问 DOM 节点。

有关应存储在组件状态中的内容以及应作为属性传递的内容的更多信息，请参阅React.js 文档中的 React 思考。

对于 2020 年及以后阅读的人

由于 React 中引入了Hooks API，您可以使用函数式组件重写此处的示例。

var myComponent = React.createClass({

  getInitialState: function() {
    return { disabled: false };
  },

  disableFormButton: function() {
    this.setState({ disabled: true });
  },

  render() {
    return (
      <div>
        ...
        <button
          disabled={this.state.disabled}
          onClick={this.disableFormButton.bind(this)}>
          Disable
        </button>
      </div>
    );
  }
});