javascript - 在 React 中使用 onchange 改变子组件的 props

Question

我正在尝试使用选择更改图表组件的 Prop 。但 url 值不会更改为 Chart 中的 data_stat2.json，即使我可以通过控制台看到 url 变量中的更改。

select 中的更改是否应该触发新的渲染以实际更改图表中的 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>
);
}
});