Question

ReactJS event.target.value 返回未定义

2020-12-15

4583

javascript node.js reactjs

我在 ReactJS 中创建了一个带有一个文本输入的表单，当它提交时，我想获取它的值并将其放入变量中。但是当我 console.log() 时，它返回 undefined 。我该如何解决这个问题？这是我的代码。

class App extends Component {
    state = {
        todoTitle: ""
    };

    render() {
        return (
            <div>
                <center>
                    <form
                        onSubmit={(event) => {
                            event.preventDefault();
                            this.setState(todoTitle: event.target.value,);
                            console.log(this.state.todoTitle); // Returns "undefined"
                        }}
                    >
                        <input
                            type="text"
                            autocomplete="off"
                            class="form-control"
                            name="todoInput"
                            placeholder="Enter todo"
                            style={{ width: "400px", height: "50px" }}
                        />
                        <input
                            type="submit"
                            value="Submit"
                            id="submitButton"
                        ></input>
                    </form>
                </center>
        }
    }
}

Answer 1

您需要创建 受控输入 或 useRef 来进行不受控输入，以便 React 跟踪您的 todoTitle 状态。

要创建 受控输入 ，您需要使用 onChange 事件 和 value={this.state.todoTitle 属性。

此外，最好在您的表单上添加 onSubmit 事件。但是，还有一个选项可以在表单提交按钮上设置提交。在这种情况下，我们需要使用 onClick={this.handleSubmit ，如下所示 <input type="submit" value="Submit" id="submitButton" onClick={this.handleSubmit} /> .

以下代码适合您：

class Form extends React.Component {
  state = {
    todoTitle: "",
  };

  handleSubmit = (e) => {
    e.preventDefault();
    console.log(this.state.todoTitle);
  };
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            autocomplete="off"
            class="form-control"
            name="todoInput"
            placeholder="Enter todo"
            style={{ width: "400px", height: "50px" }}
            value={this.state.todoTitle}
             onChange={(e) => this.setState({ todoTitle: e.target.value })}
          />
          <input type="submit" value="Submit" id="submitButton" />
        </form>
      </div>
    );
  }
}

Answer 2

您可以稍微修改一下您的应用，以获取输入文本字段 onChange 时的值，然后将其存储在数组中，如下例所示：

export default class App extends React.Component {
  state = {
    todoTitle: "",
    todoList: []
  };

  render() {
    return (
      <div>
        <center>
          <form
            onSubmit={event => {
              event.preventDefault();
              this.setState(
                {
                  todoList: [...this.state.todoList, this.state.todoTitle]
                },
                () => {
                  console.log(this.state.todoList);
                }
              );
            }}
          >
            <input
              type="text"
              autocomplete="off"
              class="form-control"
              name="todoInput"
              placeholder="Enter todo"
              onChange={event => {
                this.setState({ todoTitle: event.target.value });
                console.log(event.target.value);
              }}
              style={{ width: "400px", height: "50px" }}
            />
            <input type="submit" value="Submit" id="submitButton" />
          </form>
        </center>
      </div>
    );
  }
}

完整应用在此处： Stackblitz

Answer 3

您的代码中还有其他一些错误，但我只会回答您的问题。

setState 会触发重新渲染，因此您的状态在下次运行时才可供记录。您可以只记录您在 setState 中输入的内容。

console.log(event.target.value);

此问题有更多信息。 setState 不会立即更新状态

此外，您还可以进行回调。

this.setState({ todoTitle: event.target.value }, () =>
  console.log(this.state.todoTitle)
);