[英]Changing props of child component with onchange in React
I am trying to change the props of Chart component with select. 我正在尝试使用select更改Chart组件的属性。 But the url value does not change to data_stat2.json
in Chart
, even if I can see the change in the url
variable via the console . 但是,即使我可以通过控制台看到url
变量中的更改,URL值也不会在Chart
更改为data_stat2.json
。
Should the change in select
trigger a new render to actually change this.props.url
in Chart? 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>
);
}
});
Use State and setState
to handle passing changing data to components: 使用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>
);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.