javascript - react JS : Extract Inner HTML

Question

我有一个返回 2 个按钮 的函数，该按钮包含在 span 标签中。我想从 span 中提取 buttons，以便它可以利用 Bootstrap 样式。

这是按钮功能:

changesButtons: function()
{
    if( ! this.state.textChanged)
    {
        return null;
    }
    else
    {
        return (
            <span>
                <button className="btn btn-primary">Save</button>
                <button className="btn btn-default">Undo</button>
            </span>
        );
    }
},

这是渲染函数:

render: function()
{
    console.log(this.changesButtons());
    return (
        <div className="input-group">
            <span className="input-group-addon">
                <input
                    type="checkbox"
                    name="task-done"
                    id="task-done"
                    checked={this.state.taskDone}
                    onChange={this.handleDoneChanged}
                    />
            </span>
            <input type="text"
                    className="form-control"
                    name="item-name"
                    id="item-name"
                    value={this.state.itemName}
                    onChange={this.handleTextChange}/>
            <span className="input-group-btn">
                {this.changesButtons()}
                <button className="btn btn-warning"
                        type="button"
                        name="delete-item"
                        id="delete-item"
                        onClick={this.handleDeleteClicked}>
                    <i className="fa fa-trash"></i>
                </button>
            </span>
        </div>
    );
}

现在，跨度也被渲染，因此按钮没有应用按钮组样式。

Answer 1

不要创建函数 changesButtons()。将 {changesButtons()} 替换为:

{this.state.textChanged?
        <span>
            <button className="btn btn-primary">Save</button>
            <button className="btn btn-default">Undo</button>
        </span>
:null}