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

Posted 2023-02-22

【中文标题】如何将 Button 更改为输入文本？

【英文标题】：How I can change a Button into a input text?

【发布时间】：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 应用

那么你想要的是点击一个按钮，然后那个按钮用另一个按钮呈现一个新的表单？

【参考方案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>