我的程序无法正常工作，当我单击"添加播放器"按钮时，没有文档添加到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将在文本框中包含该值。