在React中更改onchange的子组件的道具

Question

我正在尝试使用select更改Chart组件的道具。但是，即使我可以通过控制台查看url变量中的更改，url的值也不会更改为Chart中的data_stat2.json。

select中的更改是否应该触发一个新的渲染器，以实际更改Chart中的this.props.url？

var App = React.createClass({ 
render: function() { 
var url ="data_stat1.json" 
function logChange(val) { 
url = 'data_' + val + '.json'; 
    console.log(url)}; 
return (
    <Grid style={{padding: 10}}> 
    <Row> 
     <Col md={8}> 
     <Select 
      name="stats" 
      value="stat1" 
      options={[ 
       { value: "stat1", label: "Stat1" }, 
       { value: "stat2", label: "Stat2" } 
      ]} 
      multi = {false} 
      clearable = {false} 
      searchable={false} 
      onChange = {logChange} 
     /> 
     </Col> 
    </Row> 
    <Row> 
     <Chart 
     url = {url} 
     /> 
    </Row> 
    </Grid> 
); 
} 
}); 

Answer 1

使用状态和setState来处理不断变化的数据传递到组件：

var App = React.createClass({ 
getInitialState: function() { 
    return { 
    url: "data_stat1.json", 
    }; 
}, 
handleUpdate: function(url) { 
    this.setState({ 
     url: url, 
    }); 
}, 
render: function() { 

return (
    <Grid style={{padding: 10}}> 
    <Row> 
     <Col md={8}> 
     <Select 
      name="stats" 
      value="stat1" 
      options={[ 
       { value: "stat1", label: "Stat1" }, 
       { value: "stat2", label: "Stat2" } 
      ]} 
      multi = {false} 
      clearable = {false} 
      searchable={false} 
      onChange = {this.handleUpdate} 
     /> 
     </Col> 
    </Row> 
    <Row> 
     <Chart 
     url = { this.state.url } 
     /> 
    </Row> 
    </Grid> 
); 
} 
});