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 - 這個程序是如何工作的？

回答

相關問題