Question

我遇到了一个问题，我根据用户编辑当前值进行更新。但是，在用户键入新值后，该值将恢复为其初始状态值。

我在我的代码中放了一个调试点，看到我的onChange回调处理程序正确设置state并在输入字段中显示更改的值。但是，有些事件似乎会改变它。

这是我的组件：

class UserFields extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            user:props.user
        };
        this.handleInputChange = this.handleInputChange.bind(this);
    }
    handleInputChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState({
            [name]: value
        });
    }
    render() {
        const user = this.state.user;
        return (
            <form>
                <div className="form-group">
                    <label htmlFor="user-first-name">First name</label>
                    <input name="FirstName" type="text" value={user.FirstName} onChange={this.handleInputChange}
                        className="form-control" id="user-first-name" placeholder="First name" />
                </div>
                <div className="form-group">
                    <label htmlFor="user-last-name">Last name</label>
                    <input name="LastName" type="text" value={user.LastName} onChange={this.handleInputChange}
                        className="form-control" id="user-last-name" placeholder="Last name" />
                </div>
                <div className="form-group">
                    <label htmlFor="user-active">Active</label>
                    <input name="Active" id="user-active" type="checkbox" checked={user.Active} onChange={this.handleInputChange} />
                </div>
            </form>
        );
    }
}

我已经看到了多个与此问题类似的问题，使用setState回调函数向onChange解释了我的值。但是，他们似乎没有解决我的问题。任何人都可以帮我找出原因吗？

Answer 1

您的value（例如）FirstName是this.state.user.FirstName。

在onChange处理程序中，您没有修改this.state.user。您正在完全修改其他内容（this.[name]？）。

在您的处理程序中，您需要接受旧用户并创建一个修改了适当字段的新用户（我建议Object.assign）。然后你拨打this.setState({user: myNewUserObject})

请注意，叶子组件中的这种状态处理可能会导致不直观的行为。我强烈建议将你的状态存储在上层（在props内传播处理程序方法），以备你需要f.ex.用输入数据进行AJAX调用。

Answer 2

您正在检索错误的值。您一直在使用默认值。从

改变它

value={user.FirstName}

到

value={this.state.FirstName ? this.state.FirstName : user.FirstName }

等等。

在onChange回调后，React输入值重置为初始状态

2 个答案: