javascript - 一切正常，但是当我单击编辑按钮时，每次都会添加一个逗号 (,)。我不会发现哪里出了问题？

Question

我正在尝试构建一个笔记应用程序。我已经创建了 Note And Board 组件。一切正常，但是当我单击编辑按钮时，每次都会添加一个逗号 (,)。我不会发现哪里出了问题？

这是我的代码:

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

这是因为您在 {note} 之前提供的空间，

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

将数组中的 children 更改为 Note，

[' ', 'Hello']

因此，当您执行 defaultValue = {this.props.children} 时，它会通过执行 this 将 array 转换为 string。 props.children.join(',') 这就是您在结果中获得 , 的方式。

您可以通过删除 {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>