使用单个事件处理程序更改多个文本框值
Posted
技术标签:
【中文标题】使用单个事件处理程序更改多个文本框值【英文标题】：Using single event handler for changing multiple text box values 【发布时间】：2018-12-03 15:52:32 【问题描述】：home.jsx文件
import React, Component from 'react';
// import 'react-dropdown/style.css';
import Select, Input, Button from 'antd';
import App from './App';
const Option = Select;
const INITIAL_STATE =
isShowResult: false,
allData:
languages: [
'/assets/tech logos/Languages/javascript/angular js.png',
],
frameWorks: [
'/assets/tech logos/IDE/Eclipse.png',
],
buildSystem: [
'/assets/tech logos/Build servers/apache ant.png',
],
bugTracking: [
'/assets/tech logos/Bugtracking/bugzilla.png',
],
textBox1: ' ',
textBox2: ' ',
textBox3: ' ',
textBox4: ' ',
,
;
export default class Home extends Component
constructor(props)
super(props);
this.state = INITIAL_STATE;
this.handleChangeLanguages = this.handleChangeLanguages.bind(this);
this.handleChangeFrameworks = this.handleChangeFrameworks.bind(this);
this.handleChangeBuildSystem = this.handleChangeBuildSystem.bind(this);
this.handleChangeBugTracking = this.handleChangeBugTracking.bind(this);
this.handleChangeTextBox = this.handleChangeTextBox.bind(this);
this.handleChangeTextBox1 = this.handleChangeTextBox1.bind(this);
this.handleChangeTextBox2 = this.handleChangeTextBox2.bind(this);
this.handleChangeTextBox3 = this.handleChangeTextBox3.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
handleChangeLanguages(languages)
this.setState( languages );
handleChangeFrameworks(frameWorks)
this.setState( frameWorks );
handleChangeBuildSystem(buildSystem)
this.setState( buildSystem );
handleChangeBugTracking(bugTracking)
this.setState( bugTracking );
handleChangeTextBox(e1)
this.setState(prevState => (
allData:
...prevState.allData,
textBox1: this.allData,
,
));
console.log(e1.target.value);
// 1st example
// this.setState(
// e1: this.allData.text.value
// ,()=>
// console.log('Output: ' + this.state.content)
// )
// 2nd example
// this.setState(prevState => (
// ...prevState,
// dragList:
// ...prevState.dragList,
// [res]:
// ...prevState.dragList[res],
// [type]:
// ...prevState.dragList[res][type],
// ...result
//
//
//
// ))
// 3rd example
// ...this.state,
// textArea:
// ...this.state.textArea,
// foo: foo,
// ,
// , ()=>console.log(this.state.textArea.foo)); //'some foo'
//
handleChangeTextBox1(e)
this.setState(
allData: ...this.prevState, ...this.e ,
...this.textBox2 = e.target.value,
);
console.log(e.target.value);
handleChangeTextBox2(e)
this.setState( allData: textBox3: e.target.value );
console.log(e.target.value);
handleChangeTextBox3(e)
this.setState( allData: textBox4: e.target.value );
console.log(e.target.value);
handleSubmit(event)
// event.preventDefault();
this.setState( isShowResult: true );
render()
const isShowResult, allData = this.state;
const
textBox1, textBox2, textBox3, textBox4,
= allData;
return (
<div>
<div>
!isShowResult &&
<form onSubmit=this.handleSubmit style= padding: 30 >
/* first dropdown */
<div>
<b> <h3 > What language you like ? </h3> </b >
</div>
<Select mode="multiple" defaultValue="/assets/tech logos/Languages/Javascript/angular js.png" className="selectdiv" onChange=this.handleChangeLanguages>
<Option value="/assets/tech logos/Languages/Javascript/angular js.png">
<img src="/assets/tech logos/Languages/Javascript/angular js.png" className="image-size-slider" />
</Option>
<Option value="/assets/tech logos/Languages/JAVA/java-logo.jpg">
<img src="/assets/tech logos/Languages/JAVA/java-logo.jpg" className="image-size-slider" />
</Option>
<Option value="/assets/tech logos/Languages/Javascript/react js.png">
<img src="/assets/tech logos/Languages/Javascript/react js.png" className="image-size-slider" />
</Option>
<Option value="/assets/tech logos/Languages/Javascript/node js.png">
<img src="/assets/tech logos/Languages/Javascript/node js.png" className="image-size-slider" />
</Option>
<Option value="/assets/tech logos/Languages/Microsoft/AspDotNet.png">
<img src="/assets/tech logos/Languages/Microsoft/AspDotNet.png" className="image-size-slider" />
</Option>
<Option value="/assets/tech logos/Languages/Python/Python.png">
<img src="/assets/tech logos/Languages/Python/Python.png" className="image-size-slider" />
</Option>
<Option value="/assets/tech logos/Languages/C++.png">
<img src="/assets/tech logos/Languages/C++.png" className="image-size-slider" />
</Option>
</Select>
/* second dropdown */
<div >
<b > <h3 > Which STACK / IDE you like ? </h3></b >
</div>
<Select mode="multiple" defaultValue="/assets/tech logos/IDE/Eclipse.png" className="selectdiv" onChange=this.handleChangeFrameworks>
<Option value="/assets/tech logos/IDE/Eclipse.png">
<img src="/assets/tech logos/IDE/Eclipse.png" className="image-size-slider" />
</Option>
<Option value="/assets/tech logos/IDE/IntelliJ_IDEA_Logo.svg.png">
<img src="/assets/tech logos/IDE/IntelliJ_IDEA_Logo.svg.png" className="image-size-slider" />
</Option>
<Option value="/assets/tech logos/IDE/visual_studio_purple (1).png">
<img src="/assets/tech logos/IDE/visual_studio_purple (1).png" className="image-size-slider" />
</Option>
</Select>
/* third dropdown */
<div>
<b> <h3> Which Build Servers you like ? </h3> </b>
</div>
<Select mode="multiple" defaultValue="/assets/tech logos/Build servers/apache ant.png" style= padding: 10 onChange=this.handleChangeBuildSystem >
<Option value="/assets/tech logos/Build servers/apache ant.png">
<img src="/assets/tech logos/Build servers/apache ant.png" className="image-size-slider" />
</Option>
<Option value="/assets/tech logos/Build servers/bamboo-darkbluetext_medium_trans.png">
<img src="/assets/tech logos/Build servers/bamboo-darkbluetext_medium_trans.png" className="image-size-slider" />
</Option>
<Option value="/assets/tech logos/Build servers/gitlab.png">
<img src="/assets/tech logos/Build servers/gitlab.png" className="image-size-slider" />
</Option>
<Option value="assets/tech logos/Build servers/maven.png">
<img src="/assets/tech logos/Build servers/maven.png" className="image-size-slider" />
</Option>
<Option value="/assets/tech logos/Build servers/vsts-2015.png">
<img src="/assets/tech logos/Build servers/vsts-2015.png" className="image-size-slider" />
</Option>
</Select>
/* fourth dropdown */
<div>
<b> <h3> Which Bug Tracking Software you like ? </h3> </b>
</div>
<Select mode="multiple" defaultValue="/assets/tech logos/Bugtracking/bugzilla.png" style= padding: 10 onChange=this.handleChangeBugTracking >
<Option value="/assets/tech logos/Bugtracking/bugzilla.png">
<img src="/assets/tech logos/Bugtracking/bugzilla.png" className="image-size-slider" />
</Option>
<Option value="/assets/tech logos/Bugtracking/jira.png">
<img src="/assets/tech logos/Bugtracking/jira.png" className="image-size-slider" />
</Option>
<Option value="/assets/tech logos/Bugtracking/Micro focus ALM.jpeg">
<img src="/assets/tech logos/Bugtracking/Micro focus ALM.jpeg" className="image-size-slider" />
</Option>
</Select>
<div className="textarea example-input" >
<div>
<b>
<h3>
Show me your interest.
</h3>
</b>
<Input size="large" value=textBox1 onChange=this.handleChangeTextBox />
</div>
<div>
<b>
<h3>
Show me your interest.
</h3>
</b>
<Input size="large" value=textBox2 onChange=this.handleChangeTextBox1 />
</div>
<div>
<b>
<h3>
Show me your interest.
</h3>
</b>
<Input size="large" value=textBox3 onChange=this.handleChangeTextBox2 />
</div>
<div>
<b>
<h3>
Show me your interest.
</h3>
</b>
<Input size="large" value=textBox4 onChange=this.handleChangeTextBox3 />
</div>
</div>
<div>
<Button type="danger" className="button" onClick=this.handleSubmit >Click Here</Button>
</div>
</form>
</div>
<div>
isShowResult &&
<div>
<App data=allData />
</div>
</div>
</div>
);
app.js文件
import React from 'react';
import Row, Col from 'antd';
export const languages = [
'/assets/tech logos/Languages/Javascript/angular js.png',
'/assets/tech logos/Languages/JAVA/java-logo.jpg',
'/assets/tech logos/Languages/Javascript/react js.png',
'/assets/tech logos/Languages/Javascript/node js.png',
'/assets/tech logos/Languages/Microsoft/AspDotNet.png',
'/assets/tech logos/Languages/Python/Python.png',
'/assets/tech logos/Languages/C++.png',
];
export const frameWorks = [
'/assets/tech logos/IDE/Eclipse.png',
'/assets/tech logos/IDE/IntelliJ_IDEA_Logo.svg.png',
'/assets/tech logos/IDE/visual_studio_purple (1).png',
];
export const buildSystem = [
'/assets/tech logos/Build servers/apache ant.png',
'/assets/tech logos/Build servers/bamboo-darkbluetext_medium_trans.png',
'/assets/tech logos/Build servers/gitlab.png',
'/assets/tech logos/Build servers/maven.png',
'/assets/tech logos/Build servers/vsts-2015.png',
];
export const bugTracking = [
'/assets/tech logos/Bugtracking/bugzilla.png',
'/assets/tech logos/Bugtracking/jira.png',
'/assets/tech logos/Bugtracking/Micro focus ALM.jpeg',
];
export default function APP(props)
const languagesmap = props.data.map(languages => <img src=languages alt=languages className="image-size" />);
const frameWorksmap = props.data1.map(frameWorks => <img src=frameWorks alt=frameWorks className="image-size" />);
const buildSystemmap = props.data2.map(buildSystem => <img src=buildSystem alt=buildSystem className="image-size" />);
const bugTrackingmap = props.data3.map(bugTracking => <img src=bugTracking alt=bugTracking className="image-size" />);
return (
<div>
<center>
<h1> <div className="text-color"> <b>MS SOFTWARE</b> </div> </h1>
/* <b>you selecte props.data </b> */
</center>
<div className="gutter-example">
<Row type="flex" justify="center" gutter=0>
<Col className="gutter-row " span=4>
<div className="gutter-box border-right-upper">
<div>
<Row>
<Col className="text" span=24>
<center> <b> Tech Stack </b> </center>
</Col>
</Row>
<Row>
<Col span=24>
/* <img src=languagesmap alt=languagesmap className="image-size"/> */
languagesmap
</Col>
</Row>
</div>
</div>
</Col>
<Col className="gutter-row " span=4>
<div className="gutter-box border-right-upper">
<div>
<Row>
<Col className="text" span=24>
<center> <b> IDE/STACK </b> </center>
</Col>
</Row>
<Row>
<Col span=24>
/* <img src=props.data1 alt=props.data1 className="image-size"/> */
frameWorksmap
</Col>
</Row>
</div>
</div>
</Col>
<Col className="gutter-row" span=4>
<div className="gutter-box border-right-upper">
<div>
<Row>
<Col className="text" span=24>
<center> <b> Build System </b> </center>
</Col>
</Row>
<Row>
<Col span=24>
/* <img src=props.data2 alt=props.data2 className="image-size"/> */
buildSystemmap
</Col>
</Row>
</div>
</div>
</Col>
<Col className="gutter-row" span=4>
<div className="gutter-box border">
<div>
<Row>
<Col className="text" span=24>
<center> <b> Bug Tracking </b> </center>
</Col>
</Row>
<Row>
<Col span=24>
/* <img src=props.data3 alt=props.data3 className="image-size"/> */
bugTrackingmap
</Col>
</Row>
</div>
</div>
</Col>
</Row>
<Row type="flex" justify="center" gutter=0>
<Col className="gutter-row " span=4>
<div className="gutter-box border-right-lower">
<Col span=4 />
<Col span=16>
<b>
props.textData1
</b>
</Col>
<Col span=4 />
</div>
</Col>
<Col className="gutter-row " span=4>
<div className="gutter-box border-right-lower">
<Col span=3 />
<Col span=18>
<b>
props.textData2
</b>
</Col>
<Col span=3 />
</div>
</Col>
<Col className="gutter-row " span=4>
<div className="gutter-box border-right-lower">
<Col span=4 />
<Col span=16>
<b> props.textData3 </b>
</Col>
<Col span=4 />
</div>
</Col>
<Col className="gutter-row " span=4>
<div className="gutter-box">
<Col span=4 />
<Col span=16>
<b> props.textData4 </b>
</Col>
<Col span=4 />
</div>
</Col>
</Row>
</div>
</div >
);
如果我必须在setState 函数中使用对象和展开运算符，该怎么办：
handleChangeTextBox1(e)
this.setState(
allData:(this.state.textBox,textBox:e.target.value )
);
console.log(e.target.value)
这里，allData 是一个具有对象textBox 的函数。 textBox 是数据输入的输入区域。我使用不同的句柄更改事件和this.setState 的不同值完成了这个示例。如何在一个 setState 中使用它？
我尝试过的旧版本代码是这样的：
handleChangeTextBox(e) this.setState(allData:textBox: e.target.value); console.log(e.target.value)
但这里一个文本框中的数据更改会更改所有句柄更改事件的数据。
【问题讨论】：
【参考方案1】：您需要识别从状态到文本到数据的映射，为此，您可以使用textBox 的 id 存储映射的值
state =
allData:
handleChangeTextBox(e)
this.setState(prevState => (
allData:
...prevState.allData,
[e.target.name]: e.target.value
));
在这之后你可以设置文本框的值
<input name="inp1" value=this.state.allData["inp1"] onChange=this.handleChangeTextBox/>
【讨论】：
我使用此功能获取数据，但您在输入标签中所做的更改无法使用。它给出了 name 的错误是 null 并且 inp1 不能用作数组。 您是否在输入中定义了 name 属性以及inp1 用作数组的位置
我已经准备好定义一个函数，该函数将数组作为对象，它被称为 textdata 我必须将 inout 数据的值转换为 textdata 并将其打印到另一个页面。
好的，但是我有一个问题我应该定义 prevState 吗？？
@ShubhamDave，这是一个功能性的 setState 模式。 prevState 作为参数传递给回调。检查***.com/questions/48209452/…【参考方案2】：
试试这样的
handleChangeTextBox1(e)
this.setState((prevState)=>
return allData:...prevState.allData, textBox:e.target.value
);
console.log(e.target.value)
【讨论】：
第 4 行allData:...prevState.allData, textBox : e.target.value 存在解析错误，它表示在扩展运算符之后意外使用令牌 allData: ...prevState.allData, textBox1: e1.textBox1, , 我在控制台日志中获取数据，但以单数方式不是字符串，并且在文本框中它没有显示数据
是的，有一个错字，我在最后漏掉了一个
是的，我已经更正了，但是使用该括号会产生错误【参考方案3】：
感谢您宝贵的时间，但经过这么长时间我得到了方法..
` handleChangeTextBox(e)
this.setState((prevState) => (
allData:
...prevState.allData,
textBox: e.target.value,
));
e.persist();
`
在这里，我使用了event.persist() 方法，该方法使数据保持异步模式，并用于数据持久化，顾名思义，您可以在此处阅读。
Event Persist in react
谢谢你..;-)
【讨论】：
以上是关于使用单个事件处理程序更改多个文本框值的主要内容，如果未能解决你的问题，请参考以下文章
使用单个事件处理程序 asp.net 从网格中处理多个删除事件