React JS: Extract Inner HTML

Question

Ich habe eine Funktion, die 2 Tasten in einem span Tag verpackt zurückgibt. Ich möchte die buttons aus dem span extrahieren, damit es Bootstrap-Stile nutzen kann.

Hier ist die Tasten-Funktion:

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

und hier ist die Render-Funktion:

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

Gerade jetzt, die Spanne zu gemacht wird, so dass die Tasten, um die Tastengruppe Stile haben nicht auf sie angewendet.

Answer 1

Erstellen Sie keine Funktion changesButtons(). ersetzen {changesButtons()} von:

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