我无法提交，因为读取了未定义的属性“值”

Question

我有一个输入和一个按钮，它似乎无法检测输入的值。我没有使用任何表单标签，我想知道这是否是原因。我在这里缺少什么？非常感谢并非常感谢。<div className="input-group mb-3">      <input type="text" className="form-control" placeholder="add a post"/>        <div class="input-group-append">              <button  type="submit" class="btn btn-primary" onClick={(e) => {              makePost(e.target[0].value, item._id)}} type="button">Post</button>         </div>                    </div>

Answer 1

1. e.target为您提供按钮的参考，但在那里找不到表单的数据。

2. 您有重复的 type 属性，type="submit"并且type="button"type=submit 将提交表单，而 type=button 只是一个按钮。

如果你不想使用 React 的状态，你可能无论如何都应该使用。https://reactjs.org/docs/hooks-state.html，您可以将输入元素包装在一个form元素中并附加onSubmit表单的处理程序。将按钮的类型更改为submit（请记住添加preventDefault()，这样它就不会自动“发布”表单）。

然后，e.currentTarget您将可以访问表单内的所有元素。

const Test = () => {

  const onFormSubmit = (e) => {

    e.preventDefault();

    e.stopPropagation();

    const formData = new FormData(e.currentTarget);

    for (let [name, value] of formData.entries()) {

      /* makePost function here or something */

      console.log(name + ":" + value);

    }

  }

  return (

    <form onSubmit={onFormSubmit}>

    <div className="input-group mb-3">  

        <input type="text" className="form-control" name={"id_maybe"} placeholder="add a post"/>

        <div class="input-group-append">

              <button type="submit" class="btn btn-primary">Post</button>

         </div>                    

    </div>

    </form>

  );

}

ReactDOM.render(<Test />, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

Answer 2

我想这就是你要找的

import React, { useState } from "react";

import "./style.css";

export default function App() {

  const [value, setValue] = useState("");

  const [posts, setPosts] = useState([]);

  const onSubmit = () => {

    posts.push(value);

    setPosts([...posts]);

    setValue("");

  };

  const handleInput = e => {

    setValue(e.target.value);

  };

  return (

    <div className="input-group mb-3">

      <input

        type="text"

        className="form-control"

        placeholder="add a post"

        value={value}

        onChange={handleInput}

      />

      <div class="input-group-append">

        <button class="btn btn-primary" onClick={onSubmit}>

          Add Post

        </button>

      </div>

      {posts.map(post => (

        <div>{post}</div>

      ))}

    </div>

  );

}

Answer 3

我认为你的做法不对。恕我直言，您的代码相当草率。首先，你没有<form>元素。其次，你这样做的方式很奇怪。您无需使用单独的函数，而是直接将箭头函数插入到 中button。

您还应该使用State并将其添加到构造函数中：

this.state = {

  items: [],

  text: ""

}

this.handleChange = this.handleChange.bind(this);

this.handleSubmit = this.handleSubmit.bind(this);

首先，handleChange在这里添加一个按钮：

handleChange(event) {

  this.setState({ text: event.target.value });

}

您可以在提交功能中使用类似的内容：

handleSubmit(event) {

  event.preventDefault();

  const newItem = {

    text: this.state.text,

    id: performance.now()

  };

  this.setState(state => ({

    items: state.items.concat(newItem),,

    text: ""

  }));

}

在渲染函数中更改此设置：

<form>

    <input type="text" className="form-control" onChange= {this.handleChange} value={this.state.text} placeholder="add a post"/>

        <div class="input-group-append">

              <button type="submit" class="btn btn-primary" onClick={this.handleSubmit}>Post</button>

         </div>

</form>