如何將 Button 更改為輸入文本？

Question

所以，我正在嘗試創建一個按鈕，當我單擊它時，它應該變成一個輸入，並帶有另一個用於提交的按鈕。 我正在使用反應和引導。

 <div className="cold-md-2 col-sm-3">
    <div className="card-body">
        <button class="btn btn-lg btn-block btn-group py-3" type="button">New group 
        <i class="fas fa-plus"></i></button>
     </div>
 </div>

Answer 1

您可能應該創建一個 state 指示是否應該渲染按鈕或輸入，然后在您的渲染中檢查您應該渲染哪個。

export default class Test extends PureComponent {
    constructor(props) {
        super(props);

        this.state = {
            type: 'button'
        };
    }

    toggleType() {
        this.setState({
            type: this.state.type === 'button' ? 'input' : 'button'
        });
    }

    render() {
        if (this.state.type === 'input')
            return <span>In here its the input HTML</span>;

        return (
            <button onClick={this.toggleType.bind(this)} type="button">Toggle</button>
        );
    }
}

Answer 2

 To change the text of a button that has been declared with <input type="button"> tag: use the button's value property. For example: <input type="button" value="Button Text" id="myButton">Submit</input>