首頁猿問我無法提交，因為讀取了未定義的屬性...

我無法提交，因為讀取了未定義的屬性“值”

JavaScript

呼啦一陣風 2023-09-07 14:31:36

我有一個輸入和一個按鈕，它似乎無法檢測輸入的值。我沒有使用任何表單標簽，我想知道這是否是原因。我在這里缺少什么？非常感謝并非常感謝。<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>

查看完整描述

3 回答

侃侃無極

TA貢獻2051條經驗獲得超10個贊

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 = () => {

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 (

</div>

</form>

);

}

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

反對回復 2023-09-07

躍然一笑

TA貢獻1826條經驗獲得超6個贊

我想這就是你要找的

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>

? );

}

反對回復 2023-09-07

炎炎設計

TA貢獻1808條經驗獲得超4個贊

我認為你的做法不對。恕我直言，您的代碼相當草率。首先，你沒有<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>

反對回復 2023-09-07

3 回答
0 關注
178 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

我無法提交，因為讀取了未定義的屬性“值”

我無法提交，因為讀取了未定義的屬性“值”

3 回答

添加回答