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;

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;

Answer 2

你需要先从 state 中获取 userStake

handleUserStake = (e) => {
    e.preventDefault();
    let newStake = e.target.value;
    // you need to first get it from the state before updating
    const { userStake } = this.state;
    this.setState({
        userStake: [...userStake, newStake]
    })
}

Answer 3

首先，您应该使用状态和绑定的 `handleUserStakez 方法为您的组件创建构造函数。

因为您正在等待来自表单的提交事件，所以您将使用 ref 作为输入：

this.inputRef = React.createRef();
ref={this.inputRef}

完整代码在这里：

class Stake extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userStake: ""
    };
    this.handleUserStake = this.handleUserStake.bind(this);
    this.inputRef = React.createRef();
  }

  handleUserStake = (e) => {
    e.preventDefault();
    let newStake = this.inputRef.current.value;
    console.log("newStake", newStake);
    this.setState({
      ...this.state,
      userStake: newStake
    });
  };

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

Answer 4

这应该有效......

 state = {
    userStake: [],
  };

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

出了什么问题？ :-

获取值您需要从 target 添加 NAME，即 form 以获取字段值。喜欢...

let newStake = e.target.stake.value;

获取当前的 state 值，您只是不知从何处获取 userStake，因此它给出了 undefined 错误。

this.setState((state) => ({ userStake: [...state.userStake, newStake], }));

将 [] obj 中的 userStake 的默认值设为 state。

userStake: []

Answer 5

我想我找到了解决方案。问题是我必须写 [...this.state.userStake, newStake]

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

5 个答案:

出了什么问题？ :-