ReactJS event.target.value 返回未定义答案

【问题标题】：ReactJS event.target.value returns as undefinedReactJS event.target.value 返回未定义
【发布时间】：2021-03-26 08:29:31
【问题描述】：

我在 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>
        }
    }
}

【问题讨论】：

setState 应该类似于 this.setState({todoTitle: event.target.value});
@ani：您需要任何其他有关 ReactJS、Hooks、异步 javascript 的帮助，请随时向 emmeiwhite@gmail.com 发送消息或写电子邮件。快乐编码。如果有用，请给答案评分:) 谢谢

标签： javascript node.js reactjs

【解决方案1】：

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

setState 触发重新渲染，因此您的状态在下次运行之前无法记录。您可以只记录您在 setState 中输入的内容。

console.log(event.target.value);

这个问题有更多信息。 setState doesn't update the state immediately

另外，您可以进行回调。

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

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

试试这个：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { todoTitle: "" };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    event.preventDefault();
    this.setState({ todoTitle: event.target.value });
  }

  handleSubmit(event) {
    event.preventDefault();
    console.log(this.state.todoTitle);
  }

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

这将更改输入更改的状态，然后登录提交状态。另一种方法是通过 getElementById 或 React 中的类似方法获取输入元素及其值。

您的代码格式也不是很好，并且遗漏了很多结束标签。

在这里阅读更多： Get form data in ReactJS

【讨论】：

【解决方案4】：

您需要创建一个controlled input 或useRef 以供React 跟踪您的todoTitle 状态。

要创建controlled input，您需要使用onChange event 和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>
    );
  }
}

【讨论】：