I'm trying to learn react for my first javascript project and as a start creating a very simple code that adds two numbers entered in a text box. The result is re-rendered as a number is typed. This worked for me on react v0.11.
var App = React.createClass({
mixins: [React.addons.LinkedStateMixin],
getInitialState: function() {
return {
payment: 0,
payment2: 0
};
},
render: function() {
var total = parseInt(this.state.payment, 10) +
parseInt(this.state.payment2, 10);
return (
<div>
<Payment {...this.props} valueLink={this.linkState('payment')}/><span>+</span>
<Payment {...this.props} valueLink={this.linkState('payment2')}/><span>=</span>
{ total }
</div>
);
}
});
var Payment = React.createClass({
render: function() {
return this.transferPropsTo(
<input type="text" />
);
}
});
React.render(
<App />,
document.getElementById('app')
);
However, it seems like the transferPropsTo() function was removed in v0.13. How do I do the equivalent in the latest version.
You can pass {...this.props}
in the input tag:
var Payment = React.createClass({
render: function() {
return (
<input type="text" {...this.props} />
);
}
});
This uses the JSX spread attributes feature.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.