在material-ui中动态更改按钮文本答案

【问题标题】：Change button text dynamically in material-ui在material-ui中动态更改按钮文本
【发布时间】：2016-09-22 12:26:12
【问题描述】：

如果我尝试更改标签按钮，我会收到错误，因为标签是只读属性。如何动态更改按钮文本？

export default class Tagger extends Component {
  static propTypes = {
    name: PropTypes.string
  }

  constructor(props) {
    super(props)
    this.state = {
      disabled: true
    }
    this.enableEdit = this.enableEdit.bind(this)
  }

  componentDidMount() {
    this.editButton = React.findDOMNode(this.refs.editButton)
  }
  enableEdit() {
    this.setState({disabled: !this.state.disabled})
    this.refs.editButton.props.label = 'Save'
  }

  render() {
    return (
      <div>
        <RaisedButton onClick={this.enableEdit} label='Modify' primary={true} ref='editButton' />
      </div>
    )
  }
}

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

道具是只读的，你不能改变/编辑它们

您可以简单地更改道具而不是改变它们。将 prop 的值设置为 state 并简单地传递它。

export default class Tagger extends Component {
  static propTypes = {
    name: PropTypes.string,
  }

  constructor(props) {
    super(props)
    this.state = {
      disabled: true,
      label = "Modify" // initial state
    }
    this.enableEdit = this.enableEdit.bind(this)
  }

  componentDidMount() {
    this.editButton = React.findDOMNode(this.refs.editButton)
  }
  enableEdit() {
    this.setState({
    disabled: !this.state.disabled,
    label:"Save" // update it here
    })
  }

  render() {
    // take value from state and pass it, no need for ref
    return (
      <div>
        <RaisedButton onClick={this.enableEdit} label={this.state.label} primary={true} />
      </div>
    )
  }
}

【讨论】：

【解决方案2】：

你应该使用 state 而不是 refs。

export default class Tagger extends Component {
  constructor(props) {
    super(props)
    this.state = {
      disabled: true,
      label: 'Modify'
    }
    this.enableEdit = this.enableEdit.bind(this);
  }
  enableEdit() {
    this.setState({disabled: !this.state.disabled, label: 'Save'});
  }
  render() {
    return (
      <div>
        <RaisedButton onClick={this.enableEdit} label={this.state.label} primary={true} />
      </div>
    )
  }
}

【讨论】：