Question

如果我尝试更改标签按钮，则会收到错误，因为label是一个只读属性。我怎样才能改变按钮文字？

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

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

你可以简单地改变道具而不是改变道具。将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中动态更改按钮文本

2 个答案: