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

Question

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

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>
    )
  }
}

Answer 1

你应该使用 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>
    )
  }
}

Answer 2

Props are read-only , you can't mutate/edit them

您可以简单地更改道具而不是改变它们。将 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>
    )
  }
}

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

Change button text dynamically in material-ui

reactjs

material-ui