我正在尝试构建一个笔记应用程序。我已经创建了 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>
最佳答案
这是因为您在 {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>
关于javascript - 一切正常,但是当我单击编辑按钮时,每次都会添加一个逗号 (,)。我不会发现哪里出了问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44983417/