在素材中動態更改按鈕文本-ii

Question

如果我嘗試更改標籤按鈕，則出現錯誤，因爲標籤是隻讀屬性。 如何才能更改按鈕文本dinamically？

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

道具是隻讀的，你不能變異/編輯

您可以簡單地改變道具，而不是變異人。設置道具的值來聲明並簡單傳遞它。

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

    constructor(props) { 
    super(props) 
    this.state = { 
     disabled: true, 
     lable = "Modilfy" // inital 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 of ref 
    return (
     <div> 
     <RaisedButton onClick={this.enableEdit} label={this.state.label} primary={true} /> 
     </div> 
    ) 
    } 
} 

Answer 2

你應該使用狀態，而不是參考。

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