我的程序无法正常工作，当我单击 'add player' 按钮时，没有文档添加到 mongo

Question

我想写一个简单的程序来在屏幕上添加玩家姓名和 mongodb 但我是初学者，我想用流星写一个程序来将玩家添加到 mongo，但是当我点击添加播放器按钮时，程序无法正常工作并且没有文档添加到 mongo:

import './main.html';
import React from 'react';
import ReactDom from 'react-dom';
import {Meteor} from 'meteor/meteor'
import {Players} from './../imports/api/Players'
import {Tracker} from 'meteor/tracker'

const renderPlayers = (playersList) => {
   return playersList.map((player)=> {
        return <p key={player._id}>{player.name} has {player.score} point(s).</p>;
    });
};

const handleSubmit = (e) => {

    e.preventDefault();

    let playerName = e.target.playername.value;
    if (playerName){
        e.target.playerName.value = '';
        Players.insert ({
            name: playername,
            score: 0
        })
    }
}

Meteor.startup(() => {

    Tracker.autorun(() =>{
        let playersList = Players.find().fetch();
        let title = 'Score Keep';
        let name = 'Fateme';
        let jsx = (
            <div>
                <h1>{title}</h1>
                {renderPlayers(playersList)}
                <form name="New-Player" onSubmit={handleSubmit}>
                    <input type="text" name="PlayerName" placeholder="player Name"/>
                    <input type="submit" onClick={handleSubmit} value="add player"/>
                </form>
            </div>
        );
        ReactDom.render(jsx, document.getElementById('app'));
    });

});

Answer 1

根据您的代码 e.target 指的是附加了 onClicked 处理程序的按钮。要引用输入字段值，您可以使用普通的 Javascript 或通过使用受控组件或不受控组件以 React 方式进行。如果使用普通 Javascript，请将 id 添加到输入标签并引用它

  const playerName 
  =document.getElementById("idofiputtag").value;

PlayerName 将包含文本框中的值。

我的程序无法正常工作，当我单击 'add player' 按钮时，没有文档添加到 mongo

My program doesn't work properly and when I click 'add player' button, no docs add to mongo

javascript

mongodb

preventdefault

meteor

reactjs