React JS - 这个程序是如何工作的？

我参加了Codeacademy的React.JS课程。这个问题来自React.JS第二部分。我正在学习编程的模式，但我无法理解这种模式是如何工作的React JS - 这个程序是如何工作的？

代码：

Parent.js 
var React = require('react'); 
var ReactDOM = require('react-dom'); 
var Child = require('./Child'); 

var Parent = React.createClass({ 
    getInitialState: function() { 
    return { name: 'Frarthur' }; 
    }, 

    changeName: function (newName) { 
    this.setState({ 
     name: newName 
    }); 
    }, 

    render: function() { 
    return (
     <Child 
      name={this.state.name} 
     onChange={this.changeName} 
     /> 
    ); 
    } 
}); 

ReactDOM.render(
    <Parent />, 
    document.getElementById('app') 
);

，第二部分：

Child.js 
var React = require('react'); 

var Child = React.createClass({ 
    handleChange: function (e) { 
    var name = e.target.value; 
    this.props.onChange(name); 
}, 
    render: function() { 
    return (
     <div> 
     <h1> 
      Hey my name is {this.props.name}! 
     </h1> 
     <select id="great-names" onChange={this.handleChange}> 
      <option value="Frarthur"> 
      Frarthur 
      </option> 

      <option value="Gromulus"> 
      Gromulus 
      </option> 

      <option value="Thinkpiece"> 
      Thinkpiece 
      </option> 
     </select> 
     </div> 
    ); 
    } 
}); 

module.exports = Child;

当我在改名字<option>，程序自动更改值并打印新的描述。但我不明白这个功能是如何工作的：

handleChange: function (e) { 
    var name = e.target.value; 
    this.props.onChange(name);

有人请一步一步解释一下吗？在名称和onChange处理它的孩子，哪个孩子可以通过它访问的道具

来源

2017-06-14 Afterklugge

*“我无法理解这个功能是如何工作的*”你有什么特别的不明白？这个函数没有什么特别的... –

这个handleChange函数有什么作用？ – Afterklugge

这不能回答我的问题。你在寻找什么样的解释？所有函数的工作原理都是一样的：当一个函数被调用时，主体中的每个语句都会被执行。 –

父组件通
在孩子选择字段包含一个处理器，当您选择不同的名称，this.handlechange被调用，调用通过调用this.props.onChange调用parent的changeName函数。
父级中的changeName方法将状态设置为在子选择字段中选择的不同名称。
然后更改状态再次传给孩子自动，作为道具的孩子

来源

2017-06-14 05:06:43

handleChange: function (e) { 
    var name = e.target.value; 
    this.props.onChange(name);

在child.js，handleChange功能绑定选择选项。我们在handleChange中得到了 e（事件）。
通过e.target我们得到了有针对性的元素，即选择下拉
e.target.value从选择下拉
this.props.onChange（名）检索所选值：值传递给父组件和changeName在 setState方法的帮助下更改名称的值。

来源

2017-06-14 05:12:31

React JS - 这个程序是如何工作的？

回答

相关问题