我正在尝试创建一个自定义数字选择器组件,并尝试将其添加到需要它的组件。但是,当我尝试获取父组件中的数字选择器值时,我得到的是旧值。有人可以帮我弄这个吗?
import * as React from "react";
interface IState {
value: number;
}
interface IProps {
setValue(val: number): void;
}
class NumberPicker extends React.Component<IProps, IState> {
constructor(props: any) {
super(props);
this.state = {
value: 0
};
}
public doDecrement = () =>
// DECREMENT CODE
{
if (this.state.value < 1) {
console.log("LESS THAN O");
} else {
this.setState({
value: this.state.value - 1
});
this.props.setValue(this.state.value);
}
};
public doIncrement = () =>
// INCREMENT CODE
{
this.setState({
value: this.state.value + 1
});
this.props.setValue(this.state.value);
};
public handleChange = (
e: React.ChangeEvent<HTMLInputElement> // CHANGE HANDLER
) => {
const val = parseInt(e.target.value);
this.setState({ value: val });
};
public render() {
return (
<div>
<button
onClick={this.doDecrement}
className="fa fa-minus fa-inverse fa-2x"
/>
<input
type="text"
className="number"
value={this.state.value}
onChange={this.handleChange}
/>
<button
onClick={this.doIncrement}
className="fa fa-plus fa-inverse fa-2x"
/>
</div>
);
}
}
export default NumberPicker;
import * as React from "react";
import NumberPicker from "./NumberPicker";
interface IState {
val: number;
}
interface IProps {}
class Parent extends React.Component<IProps, IState> {
constructor(props: any) {
super(props);
this.state = {
val: 0
};
}
handleVal = (value: number) => {
this.setState({ val: value }, () => console.log(this.state.val));
};
render() {
return (
//Some fields along with the below numberpicker
<NumberPicker setValue={this.handleVal} />
);
}
}
export default Parent;
我也尝试过使用setState的回调函数,但它似乎没有用。父组件始终显示较旧的值。如何在父级内获取NumberPicker的更新值?帮助将不胜感激!
React的setState
是异步的,因为this.props.setValue
函数将在setState
更新你的子Numberpicker组件中的状态之前被调用。这就是将旧值传递给父组件的原因。
相反,你可以在this.props.setValue
的回调函数中调用setState
。
public doIncrement = () =>
// INCREMENT CODE
{
this.setState({
value: this.state.value + 1
}, () => {
this.props.setValue(this.state.value);
});
};
public doDecrement = () =>
// DECREMENT CODE
{
if (this.state.value < 1) {
console.log("LESS THAN O");
} else {
this.setState({
value: this.state.value - 1
}, () => {
this.props.setValue(this.state.value);
});
}
};
setState不是同步函数。因此,当您从父级调用回调时,您使用旧的状态值调用它,因为将来某个时候将设置新值。您可以使用您设置为state的相同值调用回调:this.state.value - 1或this.state.value + 1.它应该按预期工作。我还建议您阅读thinking in react,以便更好地了解您应该保持自己的州的位置。
不要使用state在回调中传递值,你可以这样做: -
handleChange = (
e: React.ChangeEvent<HTMLInputElement> // CHANGE HANDLER
) => {
const val = parseInt(e.target.value);
// this.setState({ value: val });
this.props.setValue(val);
};
我希望它有所帮助!