一切正常，但当我点击编辑按钮时，每次都会添加一个逗号（，）。 我不会发现出了什么问题？

Question

I am trying to build a note taking app. I have created Note And Board component. Everything works fine but when I click edit button, a comma (,) is add every time. I would not find what's going wrong?

Here's my code:

 class Note extends React.Component{ constructor(){ super(); this.state={ editing:true } } edit(){ this.setState({editing: false}); } save(){ var val =this.refs.newText.value; console.log(this.refs.newText.value) this.props.onChange(val,this.props.index) this.setState({editing: true}); } delete(){ this.props.onRemove(this.props.index) } renderDisplay(){ return( <div className="note"> <p>{this.props.children}</p> <span> <button onClick={this.edit.bind(this)}>Edit</button> <button onClick={this.delete.bind(this)} className="danger">Delete</button> </span> </div> ); } renderForm(){ return( <div className="note"> <textarea ref="newText" defaultValue={this.props.children}></textarea> <button onClick={this.save.bind(this)}>Save </button> </div> ); } render(){ // this.state.editing ? return this.renderDisplay() : return this.renderForm(); if(this.state.editing){ return this.renderDisplay(); }else{ return this.renderForm(); } } } class Board extends React.Component{ constructor(){ super(); this.state={ notes: ["Hello"] } } update(newText,i){ var arr = this.state.notes; arr[i]=newText; this.setState({notes:arr}); } remove(i){ var arr =this.state.notes; arr.splice(i,1); this.setState({notes:arr}); } eachNote(note,i){ return( <Note key={i} index={i} onChange={this.update.bind(this)} onRemove= {this.remove.bind(this)}> {note}</Note> ) } add(text){ // alert("hello"); var arr = this.state.notes; arr.push(text); this.setState({notes:arr}); } render(){ return <div className="board"> <button onClick={this.add.bind(this,"New Note")}>Add</button><br/> { this.state.notes.map(this.eachNote.bind(this)) } </div> } } ReactDOM.render(<Board ></Board>, document.getElementById('root')); 

 *{ box-sizing: border-box; } body,html{ margin:0; padding: 0; height:100%; } .board{ background:#fbd14b; height:100%; min-height: 100vh; width:100%; padding:20px; } .note{ background:yellow; color: #333; width: 200px; padding: 10px; margin-bottom: 20px; box-shadow: 0px 0px 15px 5px rgba(0,0,0,.1); display: inline-block; margin-right: 20px; vertical-align: top; min-height: 150px; } button{ border:0; box-shadow: none; padding: 5px 10px; background:#3ac569; color: #fff; margin:0 5px 5px 0; } button:hover{ cursor: pointer; } .danger{ background: #E71D36; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div> 

Answer 1

It's happening because of the space you provide before {note} ,

<Note key={i} index={i} onChange={this.update.bind(this)} onRemove= {this.remove.bind(this)}> {note}</Note>

that changes children to Note in an array,

[' ', 'Hello']

So when you do defaultValue = {this.props.children} , it converts array to string by performing this.props.children.join(',') and that's how you are getting , in your result.

You can fix this by removing space before {Note}

 class Note extends React.Component{ constructor(props){ super(); this.state={ editing:true } } edit(){ this.setState({editing: false}); } save(){ var val =this.refs.newText.value; console.log(this.refs.newText.value) this.props.onChange(val,this.props.index) this.setState({editing: true}); } delete(){ this.props.onRemove(this.props.index) } renderDisplay(){ return( <div className="note"> <p>{this.props.children}</p> <span> <button onClick={this.edit.bind(this)}>Edit</button> <button onClick={this.delete.bind(this)} className="danger">Delete</button> </span> </div> ); } renderForm(){ return( <div className="note"> <textarea ref="newText" defaultValue={this.props.children}></textarea> <button onClick={this.save.bind(this)}>Save </button> </div> ); } render(){ // this.state.editing ? return this.renderDisplay() : return this.renderForm(); if(this.state.editing){ return this.renderDisplay(); }else{ return this.renderForm(); } } } class Board extends React.Component{ constructor(){ super(); this.state={ notes: ["Hello"] } } update(newText,i){ var arr = this.state.notes; arr[i]=newText; this.setState({notes:arr}); } remove(i){ var arr =this.state.notes; arr.splice(i,1); this.setState({notes:arr}); } eachNote(note,i){ return( <Note key={i} index={i} onChange={this.update.bind(this)} onRemove= {this.remove.bind(this)}>{note}</Note> ) } add(text){ // alert("hello"); var arr = this.state.notes; arr.push(text); this.setState({notes:arr}); } render(){ return <div className="board"> <button onClick={this.add.bind(this,"New Note")}>Add</button><br/> { this.state.notes.map(this.eachNote.bind(this)) } </div> } } ReactDOM.render(<Board ></Board>, document.getElementById('root')); 

 *{ box-sizing: border-box; } body,html{ margin:0; padding: 0; height:100%; } .board{ background:#fbd14b; height:100%; min-height: 100vh; width:100%; padding:20px; } .note{ background:yellow; color: #333; width: 200px; padding: 10px; margin-bottom: 20px; box-shadow: 0px 0px 15px 5px rgba(0,0,0,.1); display: inline-block; margin-right: 20px; vertical-align: top; min-height: 150px; } button{ border:0; box-shadow: none; padding: 5px 10px; background:#3ac569; color: #fff; margin:0 5px 5px 0; } button:hover{ cursor: pointer; } .danger{ background: #E71D36; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div> 

Answer 2

Here you go with the solution in the jsfiddle https://jsfiddle.net/6ktw0ucm/1/

renderForm(){
    return(
            <div className="note">
                <textarea ref="newText" defaultValue={this.props.children[1]}></textarea>
                <button onClick={this.save.bind(this)}>Save </button>
            </div>
        );
}