无法在 ReactJS 中相互更改兄弟姐妹的值
Can't Change values of Siblings Reciprocally in ReactJS
我有一个组件有两个字段,它是一个转换器。它在 lbs 和 kg 之间转换。我正在尝试编写一个组件,其中无论用户输入什么变化,即 lbs 或 kg,其他输入字段都会根据它进行更新。该代码适用于单个输入。您选择操作的第一个输入可以很好地更新另一个输入,但是如果您更改另一个输入,它将不起作用。
我做错了什么..
码笔URL:http://codepen.io/chesshouse/pen/zZOgVG
HTML代码:
<div id="app"></div>
JS代码:
var Converter = React.createClass({
getInitialState: function() {
return {};
},
_calc: function (event) {
if (event.target.name === 'lbs'){
this.setState({
kg: this.convertToKG(event.target.value),
});
} else {
this.setState({
lbs: this.convertToLBS(event.target.value),
});
}
},
convertToLBS: function ( kg ) {
var lbs;
lbs = parseInt( kg ) * 2.2046226218;
return lbs;
},
convertToKG: function ( lbs ) {
var kg;
kg = parseInt( lbs ) / 2.2046226218;
return kg;
},
render: function() {
return (
<div>
<label>LBS
<input type="text" name="lbs" onChange={this._calc} value={this.state.lbs} />
</label>
<label>Kg
<input type="text" name="kg" onChange={this._calc} value={this.state.kg} />
</label>
</div>
);
}
});
ReactDOM.render(
<Converter />,
document.getElementById('app'),
);
两个输入都从 state
获取它们的值,但您只更新更改侦听器中另一个字段的值,因此您输入的输入具有 "old" 状态值。更新侦听器中的 state.kg
和 state.lbs
。
另见 https://facebook.github.io/react/docs/forms.html#controlled-components
_calc: function (event) {
if (event.target.name === 'lbs'){
this.setState({
kg: this.convertToKG(event.target.value),
lbs : event.target.value // update the edited input state as well
});
} else {
this.setState({
lbs: this.convertToLBS(event.target.value),
kg : event.target.value // update the edited input state as well
});
}
},
你的 _calc
函数体只设置了一个值;鉴于您已控制输入,您需要在输入更改时显式更新每个值。
通过向 _calc
添加 2 行,您可以更新两个属性的值:
_calc: function (event) {
if (event.target.name === 'lbs'){
this.setState({
lbs: event.target.value, // Add this
kg: this.convertToKG(event.target.value),
});
} else {
this.setState({
lbs: this.convertToLBS(event.target.value),
kg: event.target.value // Add this
});
}
},
我有一个组件有两个字段,它是一个转换器。它在 lbs 和 kg 之间转换。我正在尝试编写一个组件,其中无论用户输入什么变化,即 lbs 或 kg,其他输入字段都会根据它进行更新。该代码适用于单个输入。您选择操作的第一个输入可以很好地更新另一个输入,但是如果您更改另一个输入,它将不起作用。
我做错了什么..
码笔URL:http://codepen.io/chesshouse/pen/zZOgVG
HTML代码:
<div id="app"></div>
JS代码:
var Converter = React.createClass({
getInitialState: function() {
return {};
},
_calc: function (event) {
if (event.target.name === 'lbs'){
this.setState({
kg: this.convertToKG(event.target.value),
});
} else {
this.setState({
lbs: this.convertToLBS(event.target.value),
});
}
},
convertToLBS: function ( kg ) {
var lbs;
lbs = parseInt( kg ) * 2.2046226218;
return lbs;
},
convertToKG: function ( lbs ) {
var kg;
kg = parseInt( lbs ) / 2.2046226218;
return kg;
},
render: function() {
return (
<div>
<label>LBS
<input type="text" name="lbs" onChange={this._calc} value={this.state.lbs} />
</label>
<label>Kg
<input type="text" name="kg" onChange={this._calc} value={this.state.kg} />
</label>
</div>
);
}
});
ReactDOM.render(
<Converter />,
document.getElementById('app'),
);
两个输入都从 state
获取它们的值,但您只更新更改侦听器中另一个字段的值,因此您输入的输入具有 "old" 状态值。更新侦听器中的 state.kg
和 state.lbs
。
另见 https://facebook.github.io/react/docs/forms.html#controlled-components
_calc: function (event) {
if (event.target.name === 'lbs'){
this.setState({
kg: this.convertToKG(event.target.value),
lbs : event.target.value // update the edited input state as well
});
} else {
this.setState({
lbs: this.convertToLBS(event.target.value),
kg : event.target.value // update the edited input state as well
});
}
},
你的 _calc
函数体只设置了一个值;鉴于您已控制输入,您需要在输入更改时显式更新每个值。
通过向 _calc
添加 2 行,您可以更新两个属性的值:
_calc: function (event) {
if (event.target.name === 'lbs'){
this.setState({
lbs: event.target.value, // Add this
kg: this.convertToKG(event.target.value),
});
} else {
this.setState({
lbs: this.convertToLBS(event.target.value),
kg: event.target.value // Add this
});
}
},