재질에서 버튼 텍스트를 동적으로 변경하십시오.

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

소품은 읽기 전용, 당신은 당신은 단순히 그들을 돌연변이 대신 소품을 변경할 수 있습니다 그들에게

을 편집/돌연변이 수 없습니다. prop의 값을 상태로 설정하고 간단히 전달하십시오.

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

refs 대신 state를 사용해야합니다.

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