在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

使用State和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>
);
}
});