ボタンを押したときにボタンのテキストを変更するReactJS

Question

ボタンを押したときにボタンのテキストを変更したい。

これは私が達成したいものです：https://codepen.io/gaearon/pen/xEmzGg?editors=0010、しかし私は働くために自分のコードを得ることができません（初心者）。

class ObjectKeyDisplay extends Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     open: false 
    } 
    this.handleClick = this.handleClick.bind(this) 
    } 

    handleClick() { 
    this.setState(prevState => ({ 
     open: prevState.open 
    })) 
    } 

    renderInner() { 
     if (!this.props.value) return <td className = "inactive" > < /td> 
     if (!this.state.open && this.props.schema.type === 'belongs_to') 
     return <td onClick={(e) => this.setState({open: !this.state.open})}> 
     <button onClick={this.handleCLick}> 
      {this.state.open ? 'OFF' : 'ON'} 
     </button> 
     </td> 
} 

は、ここに私のコードだと、あなたが見ているかもしれないと私はボタンを押したときに、テキストOFFとONを切り替えたいです。必要に応じてコードを追加できます。私が得ることができるすべてのサポートに本当に感謝しています。

Answer 1

バグがハンドラである：

this.setState(prevState => ({ 
    open: !prevState.open 
})) 

あなたが同じ値に設定している、それは前にあったように... !boolであなたはさらに条件がいずれも作っていない値

を切り替えることができます意味：

if (!this.state.open && this.props.schema.type === 'belongs_to') 
    return <td onClick={(e) => this.setState({open: !this.state.open})}> 
    <button onClick={this.handleCLick}> 
     {this.state.open ? 'OFF' : 'ON'} 
    </button> 
    </td> 

これは、条件が満たされた場合にのみ、あなたがコンポーネント何かを返すことを意味します。..

true === (!this.state.open && this.props.schema.type === 'belongs_to')

Answer 2

ここでは、あなたが探しているものです。

handleClick() { 
    const open = !this.state.open; 
    this.setState({open}) 
}