如何将 Button 更改为输入文本？答案

【问题标题】：How I can change a Button into a input text?如何将 Button 更改为输入文本？
【发布时间】：2021-04-26 07:20:53
【问题描述】：

所以，我正在尝试创建一个按钮，当我单击它时，它应该变成带有另一个按钮的输入以进行提交。我正在使用 react 和 bootstrap。

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

【问题讨论】：

这是一个纯 HTML 不是 react js 应用
那么你想要的是点击一个按钮，然后那个按钮用另一个按钮呈现一个新的表单？

标签： javascript html css reactjs bootstrap-4

【解决方案1】：

您可能应该创建一个状态来指示是否应该渲染按钮或输入，然后在您的渲染中检查您应该渲染的那个。

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

【讨论】：

【解决方案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>

【讨论】：