如何在反應中改變狀態的值

我是在 reactjs 中使用狀態的初學者，所以如果我的問題不應該在正確的位置提出，我很抱歉。使用 React js、Node js 和 mongodb

所以我創建了一個建構式并在其中初始化了一個名為 val 的變數，并將該變數傳遞給 textarea 標記中的 value 屬性，以便用戶輸入 somthing 并將其保存在 val 變數中（我不確定這是否是正確的方法這樣做，所以這就是我問的原因！）。此外，我創建了一個名為 handleSubmit 的函式，它將獲取變數 val 并將其保存在 mongodb 中，并且我在用戶傳入某些東西時應該單擊的按鈕中呼叫了該函式。但這一切似乎對我不起作用。

這是我的 ping.js 檔案：

class Pingbutton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { val: "Ford" };
  }

  handleSubmit = () => {
    // if we get state error then we need to put it in a claa and call the constructot and then call the function using this.state.the name of the function
    console.log("its running 1");
    let databody = {
      message: this.state.val,
    };
    console.log(" the message is :"   databody.message);
    console.log(" the message is :"   this.state.val);
    return fetch("http://localhost:5000/stored", {
      method: "POST",
      body: JSON.stringify(databody),
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then((res) => res.json())
      .then((data) => console.log(data));
  };
  render() {
    return (
      <div className="ok2">
        <textarea
          className="message"
          type="text"
          placeholder="Write me somthing!. Also, double click to ping:) "
          value={this.setState.val}
        ></textarea>
          <button
            className="button"
            onClick={() => {
              this.magic();
              this.handleSubmit(); //animation   //pinging the phone
              // this.handleButtonClick(); //setVal(() => ""); //sets the value of the box to empty
            }}
          >
          </button>
      </div>
    );
  }
}

export default Pingbutton;

這是后端（nodejs）index.js 檔案：

const express = require("express");
const cors = require("cors"); // Importing cors
var request = require("request");
const dotenv = require("dotenv");
const port = 5000;
var request = require("request");
var util = require("util");
const connectDB = require("./config/db");
require("dotenv").config({ path: "./config/config.env" });


const app = express();
dotenv.config();
connectDB();

app.use(cors({ origin: "http://localhost:3000" }));
app.get("/", (req, res) => {
  res.send("Hey there!");
});

app.use(cors({ origin: "http://localhost:3000" }));
app.get("/Pinged", function (req, res) {
  find_my_iphone("[email protected]", "Faresomar123", "Omar");
  res.send("Pinged!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
});

app.use(cors({ origin: "http://localhost:3000" }));
app.post("/stored", (req, res) => {
  console.log("its running 2: "   req.body);
  db.collection("quotes").insertOne(req.body, (err, data) => {
    if (err) return console.log(err);
    res.send("saved to db: "   data);
  });
});

app.listen(port, () => console.log(`Example app listening on port ${port}!`));

在框中輸入一些東西并單擊按鈕（執行handleSubmit）功能后，我一直在前端的兩個控制臺中獲得福特。我試著做 this.state.val 但沒有用，然后我把它改成了 this.setState.val 也沒有用。

我將不勝感激。

謝謝你！

uj5u.com熱心網友回復：

答案是創建一個執行以下所有操作的函式：

class App extends React.Component {
  constructor() {
    super();
    this.state = {header: 'yeaheheh'};
  }
  changeHeader = (e) => {
     e.preventDefault();
    let newHeader = this.textInput.value;
    console.log('submitted');
    this.setState({header : newHeader});
  }
  render() {
    return (
      <div>
            <h1>{this.state.header}</h1>
            <form onSubmit={this.changeHeader} className="change-header-form">
                <input id="input" ref={(input) => { this.textInput = input; }} type="text" placeholder="Enter Text Here" />
                <input type="submit" value="Submit" />
            </form>
          </div>  
    );
  }
}

ReactDOM.render(<App />, document.getElementById('test'));

完整的答案可以在該鏈接中找到：Change a state in react

標籤：javascript 节点.js 反应 mongodb 状态

上一篇：為什么不能像這樣在JS的map操作中分配字典？

下一篇：如何在函式引數中鍵入提示特定物件