我需要一個簡單的問題的幫助：如何在一個站點上使用兩個選擇表單和一個 handleChange 函式？我有兩個選擇表單，但每次我一個接一個地使用時，該值都會被覆寫。我應該分離handleChange函式嗎？我不想使用像 react select 這樣的 npm。有沒有人可以幫助我？我真的堅持這個
import React from "react";
import axios from "./axios.js";
import { useState } from "react";
import Select from "react-select";
import Creatives from "./creatives";
import FormatType from "./formattype";
export default class Form extends React.Component {
constructor(props) {
super(props);
this.state = {
value: "",
value1: "",
manager: "",
gpNummer: "",
caNummer: "",
gpNummer: "",
advertiser: "",
agency: "",
campaignName: "",
formatType: "",
startDate: "",
creative: "",
enddate: "",
error: false,
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
updateField(e) {
this.setState({
[e.target.name]: e.target.value,
});
}
/*
submit1() {
axios
.post("/Login", { mail: this.state.mail, password: this.state.password })
.then((response) => {
console.log(response.data);
if (response.data.success) {
/*location.replace('/');
} else {
this.setState({ error: response.data.error });
}
});
}
submit2() {
axios
.post("/Login", { mail: this.state.mail, password: this.state.password })
.then((response) => {
console.log(response.data);
if (response.data.success) {
/*location.replace('/');
} else {
this.setState({ error: response.data.error });
}
});
}
*/
handleChange(e) {
this.setState({ value: e.target.value });
}
handleSubmit(e) {
const {
gpNummer,
caNummer,
advertiser,
creative,
agency,
campaignName,
formatType,
startDate,
enddate,
} = this.state;
e.preventDefault();
}
render() {
return (
<div className="Main">
<div className="allforms">
<span id="Linetitle">New LineItem:</span>
{this.state.error && <div className="error">{this.state.error}</div>}
<label> Manager </label>
<select manager={this.state.manager} onChange={this.handleChange}>
<option manager="Katja">Katja</option>
<option manager="Seba">Seba</option>
<option value="aylina">aylina</option>
<option value="Christina">Christina</option>
</select>
<label> GP-Nummer </label>
<input
type="text"
onChange={(e) => this.updateField(e)}
name="gpNummer "
placeholder=" GP-Nummer "
/>
<label> CA-Nummer </label>
<input
type="text"
onChange={(e) => this.updateField(e)}
name="caNummer "
placeholder=" Fill in CA-Nummer "
/>
<label> Werbetreibender </label>
<input
type="text"
onChange={(e) => this.updateField(e)}
name="advertiser"
placeholder=" Fill in Werbetreibender "
/>
<label> Agentur </label>
<input
type="text"
onChange={(e) => this.updateField(e)}
name="agency "
placeholder=" Fill in Agentur"
/>
<label> Media Campaign Name </label>
<input
type="text"
onChange={(e) => this.updateField(e)}
name="campaignName "
placeholder=" Fill in Campaign Name"
/>
<label> Formattyp </label>
{/* <div className="select"> <FormatType /></div>*/}
<select value1={this.state.creative} onChange={this.handleChange}>
<option value1="MR">MR</option>
<option value1="premiumAdbundle">premiumAdbundle</option>
<option value1="adBundle">AdBundle</option>
<option value1="fireplace">Fireplace</option>
</select>
<label> Creative </label>
<select value={this.state.formatType} onChange={(e)=>this.handleChange(e)}>
<option value="native">native</option>
<option value="display">display</option>
<option value="advertorial">advertorial</option>
<option value="mobile">mobile</option>
</select>
{/*<div className="select"><Creatives /></div>*/}
<label>Start Date </label>
<input
type="date"
onChange={(e) => this.updateField(e)}
name="startDate"
placeholder=" Fill in Formattyp"
/>
<label>End Date </label>
<input
type="date"
onChange={(e) => this.updateField(e)}
name="enddate"
placeholder=" Fill in Formattyp"
/>
<input
onClick={(e) => this.submit1(e)}
type="submit"
value="Save to List"
/>
<input
onClick={(e) => this.submit2(e)}
type="submit"
value="Push to gam"
/>
</div>
</div>
);
}
}
uj5u.com熱心網友回復：
你可以這樣寫handlechange：
onChange={e => this.handleChange(e, customParam)}>
這樣，您可以handlechange在第二個引數的函式上添加條件檢查，并根據需要更改行為。
uj5u.com熱心網友回復：
正如有人已經建議的那樣，您可以撰寫一個接受兩個引數（事件和您更改的狀態）的函式。
此外，如果需要，您可以使用單個狀態，但作為一個陣列。在你的情況下，你可以像這樣創建狀態：
this.state{
Form: {
State1: '',
State2: '',
},
// other states
}
然后您可以使用Form.State1.
因此，您可以撰寫如下所示的函式來更新單個狀態：
const updateField = (name, value) => {
//Change the state with the new field updated
const newData = { ...Form, [name]: value };
this.setState({Form: newData});
};
在單個組件上，要更新狀態，您必須呼叫onChange，我向您展示了一個帶有輸入的示例：
<input
type="text"
onChange={(e) => this.updateField(e)}
name="gpNummer "
placeholder=" GP-Nummer "
value={this.state.Form.State1}
onChange={ev => updateField(ev.target.name, ev.target.value)}
/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/362154.html
標籤：javascript 反应