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

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

e.target为您提供按钮的参考，但在那里找不到表单的数据。您有重复的 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 = () => {&nbsp; const onFormSubmit = (e) => {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; e.stopPropagation();&nbsp; &nbsp; const formData = new FormData(e.currentTarget);&nbsp; &nbsp; for (let [name, value] of formData.entries()) {&nbsp; &nbsp; &nbsp; /* makePost function here or something */&nbsp; &nbsp; &nbsp; console.log(name + ":" + value);&nbsp; &nbsp; }&nbsp; }&nbsp; return (&nbsp; &nbsp; <form onSubmit={onFormSubmit}>&nbsp; &nbsp; <div className="input-group mb-3">&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" className="form-control" name={"id_maybe"} placeholder="add a post"/>&nbsp; &nbsp; &nbsp; &nbsp; <div class="input-group-append">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="submit" class="btn btn-primary">Post</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; </div>&nbsp; &nbsp; </form>&nbsp; );}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>