reactjs - 为什么我的组件在触发函数时没有改变状态

Question

我是 React 的新手，当用户在 inout 中键入一些值时，我试图更改状态。由于某种原因，该组件似乎不起作用。谁能解释一下为什么我没有成功实现这个功能？谢谢，华伦天奴

import React, { Component } from 'react';

class Stake extends Component {
    state = ({
        userStake: null
    });

    handleUserStake = (e) => {
        e.preventDefault();
        let newStake = e.target.value;
        this.setState({
            userStake: [...userStake, newStake]
        })
    }

    render() {
        return (
            <div>
                <form onSubmit={this.handleUserStake}>
                    <input
                        style={{
                            marginLeft: "40px",
                            width: "50px"
                        }}
                        type="text"
                        name="stake"
                        required
                    />
                </form>
            </div >
        );
    }
}

export default Stake;

标签： reactjs

Answer 1

要完成受控输入，您应该添加value指向相应状态的属性，onChange这将处理其状态更新。为您onSubmit使用另一个特定于它的处理程序。您还应该修复您的 handleChange 以正确更新其值：

class Stake extends Component {
    state = ({
        userStake: [],
        input: ''
    });

    handleUserStake = (e) => {
        let input = e.target.value;
        this.setState({ input });
    }

    handleSubmit = () => {
        e.preventDefault();
        let newStake = this.state.input;
        this.setState({
            userStake: [...this.state.userStake, newStake],
            input: '',
        })
    }

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <input
                        style={{
                            marginLeft: "40px",
                            width: "50px"
                        }}
                        type="text"
                        name="stake"
                        value={this.state.input}
                        onChange={this.handleUserStake}
                        required
                    />
                </form>
            </div>
        );
    }
}

export default Stake;