您好，我在 React 作業并且對它相當陌生，我正在努力在用戶提交運動員后（單擊創建記錄按鈕后）將欄位值重置為其原始狀態，并且我希望下拉文本框回傳到如果用戶已將欄位更改為其他內容，則為“其他”。所以例如。名字：“約翰”，姓氏：“史密斯”，運動：“男子高爾夫”將重置為
名字：“”，姓氏：“”，運動：“其他” 我已設法重置所有其他欄位，但運動下拉欄位未重置，我不知道為什么。這是我正在使用的代碼。
import React from "react";
import "./athleteEntryStyle.css";
import { baseUrl } from "../../serviceConfig";
interface Props {
username?: string;
password?: string;
dominant_foot?: string;
preferred_name?: string;
position?: string;
firstName: string;
middleName: string;
lastName: string;
phone: string;
email: string;
dateOfBirth: string;
sport: string;
}
interface State {
username?: string;
password?: string;
dominant_foot?: string;
preferred_name?: string;
position?: string;
firstName: string;
middleName: string;
lastName: string;
phone: string;
email: string;
dateOfBirth: string;
sport: string;
}
export class AthleteEntry extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
username: props.username,
password: props.password,
dominant_foot: props.dominant_foot,
preferred_name: props.preferred_name,
position: props.position,
firstName: props.firstName,
middleName: props.middleName,
lastName: props.lastName,
phone: props.phone,
email: props.email,
dateOfBirth: props.dateOfBirth,
sport: props.sport,
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event: { target: any }) {
const target = event.target;
const value = target.value;
const name = target.name;
console.log(target);
console.log(value);
console.log(name);
const newState = { [name]: value } as Pick<Props, keyof State>;
this.setState(newState);
}
handleSubmit(event: { preventDefault: () => void }) {
const request = JSON.stringify({
username: this.state.username,
email: this.state.email,
password: this.state.password,
first_name: this.state.firstName,
middle_name: this.state.middleName,
last_name: this.state.lastName,
phone_number: this.state.phone?.toString(),
dominant_foot: this.state.dominant_foot,
sport: this.state.sport,
position: this.state.position,
preferred_name: this.state.preferred_name,
date_of_birth: new Date(this.state.dateOfBirth).toISOString(),
});
console.log("Request from app");
console.log(request);
const requestOptions = {
method: "POST",
headers: { "Content-Type": "application/json" },
body: request,
};
this.setState({firstName: "", middleName: "", lastName: "", preferred_name: "", dateOfBirth: "date", phone: "", email: "",
username: "", password: "", dominant_foot: "", sport: "Other", position: "" });
//NOTE: This is assuming your service instance is running locally, we have to either make a config file that allows you to switch this as necessary or
//switch this to the hosted service when that becomes a thing
fetch(baseUrl "athlete/create", requestOptions).then(function (response) {
if (response.status == 201) {
alert("An athlete was successfully created.");
} else {
alert(
"Error creating athlete: API responded with code "
response.status.toString()
);
}
});
event.preventDefault();
}
render() {
return (
<form
className="form"
onSubmit={this.handleSubmit}
style={{
display: "flex",
padding: "20px",
height: "100vh",
background: "linear-gradient(#fff, #d00000)",
}}
>
<div>
<div style={styles}>
<label className="label">First Name:</label>
<input
name="firstName"
className="input"
type="text"
value={this.state.firstName}
onChange={this.handleChange}
/>
</div>
<div style={styles}>
<label className="label">Middle Name:</label>
<input
name="middleName"
className="input"
type="text"
value={this.state.middleName}
onChange={this.handleChange}
/>
</div>
<div style={styles}>
<label className="label">Last Name:</label>
<input
name="lastName"
className="input"
type="text"
value={this.state.lastName}
onChange={this.handleChange}
/>
</div>
<div style={styles}>
<label className="label">Preferred Name:</label>
<input
name="preferred_name"
className="input"
type="text"
value={this.state.preferred_name}
onChange={this.handleChange}
/>
</div>
<div style={styles}>
<label className="label">Date of Birth:</label>
<input
name="dateOfBirth"
className="input"
type="date"
value={this.state.dateOfBirth}
onChange={this.handleChange}
/>
</div>
<div style={styles}>
<label className="label">Phone Number:</label>
<input
name="phone"
className="input"
type="text"
value={this.state.phone}
onChange={this.handleChange}
/>
</div>
<div style={styles}>
<label className="label">Email:</label>
<input
name="email"
className="input"
type="text"
value={this.state.email}
onChange={this.handleChange}
/>
</div>
<div style={styles}>
<label className="label">Username:</label>
<input
name="username"
className="input"
type="text"
value={this.state.username}
onChange={this.handleChange}
/>
</div>
<div style={styles}>
<label className="label">Password:</label>
<input
name="password"
className="input"
type="password"
value={this.state.password}
onChange={this.handleChange}
/>
</div>
<div style={styles}>
<label className="label">Dominant Foot:</label>
<input
name="dominant_foot"
className="input"
type="text"
value={this.state.dominant_foot}
onChange={this.handleChange}
/>
</div>
<div style={styles}>
<label className="label">Sport:</label>
{/* <input
name="sport"
className="input"
type="text"
value={this.state.sport}
onChange={this.handleChange}
/> */}
<select
name="sport"
className="input"
id="sport"
defaultValue="Other"
onChange={this.handleChange}
>
<option value="Football (MFB)">Football (MFB)</option>
<option value="Baseball (MBA)">Baseball (MBA)</option>
<option value="Softball (WSB)">Softball (WSB)</option>
<option value="Men's Basketball (MBB)">
Men's Basketball (MBB)
</option>
<option value="Women's Basketball (WBB)">
Women's Basketball (WBB)
</option>
<option value="Men's Cross Country (MCC)">
Men's Cross Country (MCC)
</option>
<option value="Women's Cross Country (WCC)">
Women's Cross Country (WCC)
</option>
<option value="Men's Golf (MGO)">Men's Golf (MGO)</option>
<option value="Women's Golf (WGO)">Women's Golf (WGO)</option>
<option value="Women's Soccer (WSO)">Women's Soccer (WSO)</option>
<option value="Women's Volleyball (WVB)">
Women's Volleyball (WVB)
</option>
<option value="Women’s Bowling (WBW)">
Women’s Bowling (WBW)
</option>
<option value="Men’s Gymnastics (MGY)">
Men’s Gymnastics (MGY)
</option>
<option value="Women’s Gymnastics (WGY)">
Women’s Gymnastics (WGY)
</option>
<option value="Women’s Swimming/Diving (WSW)">
Women’s Swimming/Diving (WSW)
</option>
<option value="Men’s Tennis (MTE)">Men’s Tennis (MTE)</option>
<option value="Women’s Tennis (WTE)">Women’s Tennis (WTE)</option>
<option value="Men’s Wrestling (MWR)">
Men’s Wrestling (MWR)
</option>
<option value="Women’s Rifle (WRI)">Women’s Rifle (WRI)</option>
<option value="Women’s Track (WTO)">Women’s Track (WTO)</option>
<option value="Men’s Track (MTO)">Men’s Track (MTO)</option>
<option value="Other">Other</option>
</select>
</div>
<div style={styles}>
<label className="label">Position:</label>
<input
name="position"
className="input"
type="text"
value={this.state.position}
onChange={this.handleChange}
/>
</div>
<div style={{ marginBottom: 12, padding: 10 }}>
<label>
<input type="submit" value="Create Record" className="button"/>
</label>
</div>
</div>
</form>
);
}
}
const styles = {
marginBottom: 12,
};
除了進行更改的那一行之外，上面的大多數代碼對您來說都無關緊要。所以
this.setState({firstName: "", middleName: "", lastName: "", preferred_name: "", dateOfBirth: "date", phone: "", email: "",
username: "", password: "", dominant_foot: "", sport: "Other", position: "" });
是進行更改的地方。
uj5u.com熱心網友回復：
看起來你defaultValue="Other"在你的select組件中有一個道具，但你真正想要的是value={this.state.sport}，就像你在input上面注釋掉的那樣。這將使其成為受控組件，因此該選擇欄位的值將基于您的狀態。其他欄位是這樣完成的，看起來可能只是一個疏忽。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/354508.html
標籤：javascript 反应 落下
下一篇：iframe更改選擇選項文本