在不同条件下响应调用方法

Question

我是react的初学者，我已经编写了以下代码：

class Note extends React.Component {
   constructor(props) {
       super(props);
       this.state = {editing: false};

        this.edit = this.edit.bind(this);
        this.save = this.save.bind(this);

   }

   edit() {
       // alert('edit');
       this.setState({editing: !this.state.editing});
   }

   save() {
       this.props.onChange(this.refs.newVal.value, this.props.id);
       this.setState({editing: !this.state.editing});
       // console.log('save is over');
   }

   renderForm() {
       return (
           <div className="note">
               <textarea ref="newVal"></textarea>
               <button onClick={this.save}>SAVE</button>
           </div>
       );
   }

   renderDisplay() {
       return (
           <div className="note">
               <p>{this.props.children}</p>
               <span>
                         <button onClick={this.edit}>EDIT</button>
                        <button onClick={this.remove}>X</button>
               </span>
           </div>
       );
   }

   render() {
       console.log(this.state.editing);
       return (this.state.editing) ? this.renderForm()
           : this.renderDisplay()

   }
}

class Board extends React.Component {

   constructor(props){
       super(props);

       this.state = {
           notes: []
       };

       this.update = this.update.bind(this);
       this.eachNote = this.eachNote.bind(this);
       this.add = this.add.bind(this);
   }

   nextId() {
       this.uniqeId = this.uniqeId || 0;
       return this.uniqeId++;
   }

   add(text) {
       let notes = [
           ...this.state.notes,
           {
               id: this.nextId(),
               note: text
           }
       ];

       this.setState({notes});
   }

   update(newText, id) {
       let notes = this.state.notes.map(
           note => (note.id !== id) ?
               note :
               {
                   id: id,
                   note: newText
               }
       );
       this.setState({notes})
   }

    eachNote(note) {
       return (<Note key={note.id}
                     id={note.id}
                     onChange={this.update}>

           {note.note}
       </Note>)
   }

   render() {
       return (<div className='board'>
           {this.state.notes.map(this.eachNote)}
           <button onClick={() => this.add()}>+</button>
       </div>)
   } 
}

ReactDOM.render(<Board />,
   document.getElementById('root'));

在render（）中，onClick event有一个函数，即，如果以这种方式使用：{this.add}将创建以下错误：

未捕获错误：对象作为React子对象无效（已找到：带键的对象{调度配置，_targetInst，native事件，类型，目标，当前目标，事件阶段，气泡，可取消，时间戳，默认预防，isTrusted，视图，详细信息，...}）

为什么？在eachNote（）方法中使用此命令时：

onChange={this.update}

没有错误。

有人能告诉我原因吗？谢谢。

Answer 1

class Note extends React.Component {
   constructor(props) {
       super(props);
       this.state = {editing: false};

        this.edit = this.edit.bind(this);

   }

   edit() {
       // alert('edit');
       this.setState({editing: !this.state.editing});
   }
   
   render() {
     return (
       <div>Render something</div>
     )
   }
}

class Board extends React.Component {

   constructor(props){
       super(props);

       this.state = {
           notes: []
       };

       this.update = this.update.bind(this);
       this.eachNote = this.eachNote.bind(this);
       this.add = this.add.bind(this);
   }

   nextId() {
       this.uniqeId = this.uniqeId || 0;
       return this.uniqeId++;
   }

   add(text) {
       let notes = [
           ...this.state.notes,
           {
               id: this.nextId(),
               note: text
           }
       ];

       this.setState({notes});
   }

   update(newText, id) {
       let notes = this.state.notes.map(
           note => (note.id !== id) ?
               note :
               {
                   id: id,
                   note: newText
               }
       );
       this.setState({notes})
   }

    eachNote(note) {
       return (<Note key={note.id}
                     id={note.id}
                     onChange={this.update}>

           {note.note}
       </Note>)
   }

   render() {
       return (<div className='board'>
           {this.state.notes.map(this.eachNote)}
           <button onClick={() => this.add()}>+</button>
       </div>)
   } 
}

ReactDOM.render(<Board />,
   document.getElementById('root'));

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

<div id="root"></div>

Answer 2

onClick={this.add}将单击事件传递给this.add。

所以你需要做的是：

onClick={e=

如果你想onClick={this.add}你必须确保你的add方法是：add（event）{…}。

Answer 3

问题是，在add函数中，您正在获取一个参数文本，并将其设置为状态，因此当您调用onClick={（）=

但是，如果您直接调用它，如on点击={this.add}，则add函数将事件对象作为参数接收，因此它将state note设置为事件对象你用它来渲染代码