Question

我按照教程使用react.js发布了这个https://jsbin.com/foxoxejilu/1/edit?js,output。

我对道具和状态感到困惑。在save的{{1}}方法中，此行做了什么

Note component

我没有在代码中的其他地方看到onChange和onRemove函数，是一个预构建函数的反应吗？怎么反应知道DOM被改变或删除了？

Answer 1

我们可以总结一下这样的事情：

父母（Board）将她的孩子（Note）打包（props）并放入手机（onChange）并说：如果您愿意告诉我一些事情只是给我留言。然后一段时间后，孩子认为“让我的父母发短信”，这样孩子就可以从他的财产中取出电话并给父母发短信：this.props.onChange("Thank you for sandwiches")。然后，家长会收到该消息并将其保存到她的笔记本中（state）：this.setState({notes})

这是孩子收到属性（道具）的地方：

<Note key={note.id}
      id={note.id}
      onChange={this.update}
      onRemove={this.remove}>
      {note.note}
 </Note>

当以上内容找到render()组件的Board方法时（通过{this.state.notes.map(this.eachNote)}，就像Board一样，

“嘿，让我们渲染Note组件并让它给它一些属性（道具）”。
“让我们命名其中一个道具onChange，当Note稍后调用它时，让我们执行我自己的方法update”
“调用此道具onChange，我们可以随意调用它，例如为<Note ... fromParentWithLove={this.update}> ... </Note>，但我们称之为onChange，以便更容易理解我们的意图。“

然后，我们可以移动到子组件 - Note。 Note对自己说：

“哇，如果有人点击”保存“按钮，请运行我自己的save方法：”<button onClick={this.save}>Save</button>
“然后，在我的save方法中，让我们调用我父母onChange通过道具”Board“

this.props.onChange(this.refs.newText.value, this.props.id)

供参考，以下是从JSBin：

复制的代码

var Note = React.createClass({
        getInitialState(){
            return {editing: false}
        },
        edit() {
            this.setState({editing: true})
        },
        save() {
            this.props.onChange(this.refs.newText.value, this.props.id)
            this.setState({editing: false})
        },
        remove() {
            this.props.onRemove(this.props.id)
        },
        renderForm() {
            return(
                <div className="note">
                    <textarea ref="newText"></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() {
            return (this.state.editing) ? this.renderForm() : this.renderDisplay()
        }
    })

 var Board = React.createClass({
        propTypes: {
            count: function(props, propName) {
                if(typeof props[propName] !== 'number'){
                    return new Error('the count must be a number')
                }
            }
        },
        getInitialState() {
            return {
                notes: [
                {id:1, note:'Call boook'},
                {id:2, note:'Buy Something'},
                {id:3, note:'Wash Clothes'},
                {id:4, note:'Go Jogging'}
                ]
            }
        },
        update(newText, id){
            var notes = this.state.notes.map(
                note => (note.id !== id) ?
                    note:
                    {
                        ...note,
                        note:newText
                    }
            )
            this.setState({notes})
        },
        remove(id){
            var notes = this.state.notes.filter(note => note.id !== id)
            this.setState({notes})
        },
        eachNote(note) {
            return (<Note key={note.id}
                          id={note.id}
                          onChange={this.update}
                          onRemove={this.remove}>
                      {note.note}
                    </Note>)
        },
        render() {
            return (<div className='board'>
                       {this.state.notes.map(this.eachNote)}
                    </div>)
        }
    })

ReactDOM.render(<Board count={10}> </Board>, 
        document.getElementById('react-container'))

在react.js中道具和状态之间的混淆

1 个答案: