反应获取用户信息.(输入值)点击按钮 [英] React Get User Info.(Input Values) On a Button Click

查看：46
本文介绍了反应获取用户信息.(输入值)点击按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我制作了一个简单的简历门户.我想要的是在提交时在屏幕上显示所有输入值.这一切都应该在点击 button(Generate CV) 时完成.

下面是我的代码:

子组件(src -> Routes -> UserForm -> Components -> UserDetails -> index.js)

从 'react' 导入 React导入'./style.scss';从'react-bootstrap'导入{行，列}const UserDetails = (props) =>{const { wrkExpTxtArea, AcQuTxtArea, clickToAdd, clickToRmv, addAcQuTxtArea, rmvAcQuTxtArea, inputChangeHandler } = props返回 (<><div className='UserDetails'><行><Col lg='6'>
<h4>个人信息<p>你的名字</p><input onChange={() =>inputChangeHandler('name')} type="text"占位符=在此处输入"/><p>您的联系人</p><输入类型=文本"占位符=在此处输入"/><p>您的地址</p><textarea className='formAddress' rows="5";cols=10"占位符=在此处输入"/><p id='impLinks'>重要链接</p><p>脸书</p><输入类型=文本"占位符=在此处输入"/><p>Instagram</p><输入类型=文本"占位符=在此处输入"/><p>Linkedin</p><输入类型=文本"占位符=在此处输入"/>
</Col><Col lg='6'><h4>专业信息<p>目标</p><textarea className='formObjective' rows="5";cols=10"占位符=在此处输入"/><p>工作经验</p>{wrkExpTxtArea.map(item => (<textarea className='formWrkExp' value={item.value} rows=3";cols=10"占位符=在此处输入"/>))}<div className='Button' ><input type='button' value='Add' onClick={clickToAdd}/><input type='button' value='Remove' onClick={clickToRmv}/>

<p id='AcQu'>学术资格</p>{AcQuTxtArea.map(item => (<textarea className='formAcQu' value={item.value} rows=3";cols=10"占位符=在此处输入"/>))}<div className='Button' ><input type='button' value='Add' onClick={addAcQuTxtArea}/><input type='button' value='Remove' onClick={rmvAcQuTxtArea}/>

</Col><行>

<input type='button' value='Generate CV'/>

</行></行>

</>)}导出默认用户详细信息；

父组件(src -> Routes -> UserForm -> index.js)

从反应"导入反应；从../../Components/HOC/Page/index"导入页面；从../UserForm/Components/UserDetails/index"导入用户详细信息；类 UserForm 扩展 React.Component {状态 = {wrkExpTxtArea: [{ text: "";}],AcQuTxtArea: [{ text: "";}],inputValues: [{name: 'name', value: ''}],};inputChangeHandler = (e,inputName) =>{让更新输入 = [...this.state.inputValues]让 changedInputValuesIndex = updatedInputs.findIndex(input => input.name === inputName)if (changedInputValuesIndex > -1) {让更新的输入值 ={...updatedInputs[changedInputValuesIndex]}更新的InputValue.value = e.target.valueupdatedInputs[changedInputValuesIndex] = updatedInputValue}this.setState({inputValues: updatedInputs})}addTextArea = () =>{让 updatedTextArea = [...this.state.wrkExpTxtArea];updatedTextArea.push({ text: "" });this.setState({ wrkExpTxtArea: updatedTextArea });};rmvTextArea = () =>{让 updatedTextArea = [...this.state.wrkExpTxtArea];if (updatedTextArea.length > 1) {updatedTextArea.pop({ 文本: "" });}this.setState({ wrkExpTxtArea: updatedTextArea });};addAcQuTextArea = () =>{让 updatedTextArea = [...this.state.AcQuTxtArea];updatedTextArea.push({ text: "" });this.setState({ AcQuTxtArea: updatedTextArea });};rmvAcQuTextArea = () =>{让 updatedTextArea = [...this.state.AcQuTxtArea];if (updatedTextArea.length > 1) {updatedTextArea.pop({ text: "" });}this.setState({ AcQuTxtArea: updatedTextArea });};使成为() {返回 (<><Pages showHeader showFooter><UserDetails inputChangeHandler={this.inputChangeHandler} wrkExpTxtArea={this.state.wrkExpTxtArea} clickToAdd={this.addTextArea} clickToRmv={this.rmvTextArea}AcQuTxtArea={this.state.AcQuTxtArea} addAcQuTxtArea={this.addAcQuTextArea} rmvAcQuTxtArea={this.rmvAcQuTextArea}/></页面></>);}}导出默认用户表单；

输出:

我是编程新手，获取用户输入的值对我来说似乎非常复杂.我几乎不知道这可以使用 state 、 props 等来实现.但我真的不知道在哪里以及放置什么代码.我需要帮助.就这样！

解决方案

index.js

import React, { useState } from "react";从../../Components/HOC/Page/index"导入页面；从../UserForm/Components/UserDetails/index"导入用户详细信息；常量初始数据 = {名称: ''，接触: ''，地址: ''，Facebook: ''，微博:'',链接:'',客观的: ''，工作经验: []，学历:[],}const 用户窗体 = () =>{//保存来自子组件UserDetails"的所有表单数据；const [formData, setFormData] = useState(initialData)const handleSubmit = () =>{//提交处理程序警报(JSON.stringify(formData，未定义，4))}返回 (<><Pages showHeader showFooter><UserDetails form={formData} setter={setFormData} onSubmit={handleSubmit}/></页面></>)}导出默认用户表单；

用户详细信息

导入 React, { useState } from 'react'导入'./style.scss';从'react-bootstrap'导入{行，列}const UserDetails = ({ form, setter, onSubmit }) =>{const hanldeOnChange = (e) =>{设置器(上一个 => {//通过输入元素的名称访问属性//更新父组件的状态prev[e.target.name] = e.target.value;return { ...prev }//更新后返回副本})}const [listTypeElements, setListTypeElements] = useState({ workExperience: '', AcademicQualification: '' })const handleListInput = (property) =>{设置器(上一个 => {prev[property].push(listTypeElements[property]);返回 { ...prev }})setListTypeElements(prev => {上一个[属性] = ''返回 { ...prev }})}const handleRemoveItem = (property) =>{设置器(上一个 => {上一个[属性].pop();返回 { ...prev }})}返回 (<><div className='UserDetails'><行><Col lg='6'>
<h4>个人信息<p>你的名字</p><输入类型=文本"占位符=在此处输入"onChange={hanldeOnChange} name='name'/><p>您的联系人</p><输入类型=文本"占位符=在此处输入"onChange={hanldeOnChange} name='contact'/><p>您的地址</p><textarea className='formAddress' rows="5";cols=10"占位符=在此处输入"onChange={hanldeOnChange} name='address'/><p id='impLinks'>重要链接</p><p>脸书</p><输入类型=文本"占位符=在此处输入"onChange={hanldeOnChange} name='facebook'/><p>Instagram</p><输入类型=文本"占位符=在此处输入"onChange={hanldeOnChange} name='instagram'/><p>Linkedin</p><输入类型=文本"占位符=在此处输入"onChange={hanldeOnChange} name='linkedin'/>
</Col><Col lg='6'><h4>专业信息<p>目标</p><textarea className='formObjective' rows="5";cols=10"占位符=在此处输入"onChange={hanldeOnChange} name='objective'/><p>工作经验</p>{form.workExperience.map((value) =><textarea className='formWrkExp' value={value} rows=3";cols=10"禁用={真}/>)}<textarea className='formWrkExp' value={listTypeElements['workExperience']} rows=3";cols=10"占位符=在此处输入"onChange={(e) =>setListTypeElements(prev => {prev['workExperience'] = e.target.value;返回 { ...prev }})}/><div className='Button' ><input type='button' value='Add' onClick={() =>handleListInput('workExperience')}/><input type='button' value='Remove' onClick={() =>handleRemoveItem('workExperience')}/>

<p id='AcQu'>学术资格</p>{form.academicQualification.map((value) =><textarea className='formAcQu' value={value} rows=3";cols=10"禁用={真}/>)}<textarea className='formAcQu' value={listTypeElements['academicQualification']} rows=3";cols=10"占位符=在此处输入"onChange={(e) =>setListTypeElements(prev => {prev['academicQualification'] = e.target.value;返回 { ...prev }})}/><div className='Button' ><input type='button' value='Add' onClick={() =>handleListInput('academicQualification')}/><input type='button' value='Remove' onClick={() =>handleRemoveItem('academicQualification')}/>

</Col><行>

<input type='button' value='Generate CV' onClick={onSubmit}/>

</行></行>

</>)}导出默认用户详细信息；

I've made a simple resume portal. What I want is to get all the inputs values displayed on a screen on submit. This all should be done when button(Generate CV) is clicked.

Here's my code below:

Child component ( src -> Routes -> UserForm -> Components -> UserDetails -> index.js )

import React from 'react'
import './style.scss';
import { Row, Col } from 'react-bootstrap'

const UserDetails = (props) => {
    const { wrkExpTxtArea, AcQuTxtArea, clickToAdd, clickToRmv, addAcQuTxtArea, rmvAcQuTxtArea, inputChangeHandler } = props
    return (
        <>
            <div className='UserDetails'>
                <Row>
                    <Col lg='6'>
                        <div className='persnlInfo'>
                            <h4>
                                Personal Information
                            </h4>
                            <p>Your Name</p>
                            <input onChange={() => inputChangeHandler('name')} type="text" placeholder="Enter here" />
                            <p>Your Contact</p>
                            <input type="text" placeholder="Enter here" />
                            <p>Your Address</p>
                            <textarea className='formAddress' rows="5" cols="10" placeholder="Enter here" />
                            <p id='impLinks'>Important Links</p>
                            <p>Facebook</p>
                            <input type="text" placeholder="Enter here" />
                            <p>Instagram</p>
                            <input type="text" placeholder="Enter here" />
                            <p>Linkedin</p>
                            <input type="text" placeholder="Enter here" />
                        </div>
                    </Col>

                    <Col lg='6'>
                        <h4>
                            Professional Information
                        </h4>
                        <p>Objective</p>
                        <textarea className='formObjective' rows="5" cols="10" placeholder="Enter here" />

                        <p>Work Experience</p>
                        {wrkExpTxtArea.map(item => (
                            <textarea className='formWrkExp' value={item.value} rows="3" cols="10" placeholder="Enter here" />
                        ))}
                        <div className='Button' >
                            <input type='button' value='Add' onClick={clickToAdd} />
                            <input type='button' value='Remove' onClick={clickToRmv} />
                        </div>
                        
                        <p id='AcQu'>Academic Qualification</p>
                        {AcQuTxtArea.map(item => (
                            <textarea className='formAcQu' value={item.value} rows="3" cols="10" placeholder="Enter here" />
                        ))}
                        <div className='Button' >
                            <input type='button' value='Add' onClick={addAcQuTxtArea} />
                            <input type='button' value='Remove' onClick={rmvAcQuTxtArea} />
                        </div>
                    </Col>
                    <Row>
                        <div className='sbmtButton'>
                            <input type='button' value='Generate CV' />
                        </div>
                    </Row>
                </Row>
            </div>
        </>
    )
}
export default UserDetails;

Parent component ( src -> Routes -> UserForm -> index.js )

import React from "react";
import Pages from "../../Components/HOC/Page/index";
import UserDetails from "../UserForm/Components/UserDetails/index";

class UserForm extends React.Component {
  state = {
    wrkExpTxtArea: [{ text: "" }],
    AcQuTxtArea: [{ text: "" }],
    inputValues: [{name: 'name', value: ''}],
  };
  inputChangeHandler = (e,inputName) => {
  let updatedInputs = [...this.state.inputValues]
  let changedInputValuesIndex = updatedInputs.findIndex(input => input.name === inputName) 
  if (changedInputValuesIndex > -1) {
  let updatedInputValue = 
  {...updatedInputs[changedInputValuesIndex]}
  updatedInputValue.value = e.target.value
  updatedInputs[changedInputValuesIndex] = updatedInputValue
  }
  this.setState({inputValues: updatedInputs})

  }
  addTextArea = () => {
    let updatedTextArea = [...this.state.wrkExpTxtArea];
    updatedTextArea.push({ text: "" });
    this.setState({ wrkExpTxtArea: updatedTextArea });
  };
  rmvTextArea = () => {
    let updatedTextArea = [...this.state.wrkExpTxtArea];
    if (updatedTextArea.length > 1) {
      updatedTextArea.pop({ text: "" });
    }
    this.setState({ wrkExpTxtArea: updatedTextArea });
  };
  addAcQuTextArea = () => {
    let updatedTextArea = [...this.state.AcQuTxtArea];
    updatedTextArea.push({ text: "" });
    this.setState({ AcQuTxtArea: updatedTextArea });
  };
  rmvAcQuTextArea = () => {
    let updatedTextArea = [...this.state.AcQuTxtArea];
    if (updatedTextArea.length > 1) {
      updatedTextArea.pop({ text: "" });
    }
    this.setState({ AcQuTxtArea: updatedTextArea });
  };
  render() {
    return (
      <>
        <Pages showHeader showFooter>
          <UserDetails inputChangeHandler={this.inputChangeHandler} wrkExpTxtArea={this.state.wrkExpTxtArea} clickToAdd={this.addTextArea} clickToRmv={this.rmvTextArea} 
          AcQuTxtArea={this.state.AcQuTxtArea} addAcQuTxtArea={this.addAcQuTextArea} rmvAcQuTxtArea={this.rmvAcQuTextArea} />
        </Pages>
      </>
    );
  }
}

export default UserForm;

Output:

I'm new to programming and getting values of user inputs seems insanely complicated to me. I'm little aware that this can be achieved using state , props etc. But I really have no idea about Where and What code is to place. I need help. That’s it!

解决方案

index.js

import React, { useState } from "react";
import Pages from "../../Components/HOC/Page/index";
import UserDetails from "../UserForm/Components/UserDetails/index";

const initialData = {
  name: '',
  contact: '',
  address: '',
  facebook: '',
  instagram: '',
  linkedin: '',
  objective: '',
  workExperience: [],
  academicQualification: [],
}

const UserForm = () => {

  // holds all the form data from child component "UserDetails"
  const [formData, setFormData] = useState(initialData)

  const handleSubmit = () => {
    // submit handler
    alert(JSON.stringify(formData, undefined, 4))
  }

  return (
    <>
      <Pages showHeader showFooter>
        <UserDetails form={formData} setter={setFormData} onSubmit={handleSubmit} />
      </Pages>
    </>
  )
}

export default UserForm;

UserDetails


import React, { useState } from 'react'
import './style.scss';
import { Row, Col } from 'react-bootstrap'

const UserDetails = ({ form, setter, onSubmit }) => {


    const hanldeOnChange = (e) => {
        setter(prev => {
            // access property by input element's name
            // update the state on parent component
            prev[e.target.name] = e.target.value;
            return { ...prev } // return copy after updating
        })
    }

    const [listTypeElements, setListTypeElements] = useState({ workExperience: '', academicQualification: '' })
    const handleListInput = (property) => {
        setter(prev => {
            prev[property].push(listTypeElements[property]);
            return { ...prev }
        })
        setListTypeElements(prev => {
            prev[property] = ''
            return { ...prev }
        })
    }


    const handleRemoveItem = (property) => {
        setter(prev => {
            prev[property].pop();
            return { ...prev }
        })
    }


    return (
        <>
            <div className='UserDetails'>
                <Row>
                    <Col lg='6'>
                        <div className='persnlInfo'>
                            <h4>
                                Personal Information
                            </h4>
                            <p>Your Name</p>
                            <input type="text" placeholder="Enter here" onChange={hanldeOnChange} name='name' />
                            <p>Your Contact</p>
                            <input type="text" placeholder="Enter here" onChange={hanldeOnChange} name='contact' />
                            <p>Your Address</p>
                            <textarea className='formAddress' rows="5" cols="10" placeholder="Enter here" onChange={hanldeOnChange} name='address' />
                            <p id='impLinks'>Important Links</p>
                            <p>Facebook</p>
                            <input type="text" placeholder="Enter here" onChange={hanldeOnChange} name='facebook' />
                            <p>Instagram</p>
                            <input type="text" placeholder="Enter here" onChange={hanldeOnChange} name='instagram' />
                            <p>Linkedin</p>
                            <input type="text" placeholder="Enter here" onChange={hanldeOnChange} name='linkedin' />
                        </div>
                    </Col>

                    <Col lg='6'>
                        <h4>
                            Professional Information
                        </h4>
                        <p>Objective</p>
                        <textarea className='formObjective' rows="5" cols="10" placeholder="Enter here" onChange={hanldeOnChange} name='objective' />

                        <p>Work Experience</p>
                        {form.workExperience.map((value) =>
                            <textarea className='formWrkExp' value={value} rows="3" cols="10" disabled={true} />)}

                        <textarea className='formWrkExp' value={listTypeElements['workExperience']} rows="3" cols="10" placeholder="Enter here" onChange={(e) => setListTypeElements(prev => {
                            prev['workExperience'] = e.target.value;
                            return { ...prev }
                        })} />
                        < div className='Button' >
                            <input type='button' value='Add' onClick={() => handleListInput('workExperience')} />
                            <input type='button' value='Remove' onClick={() => handleRemoveItem('workExperience')} />
                        </div>

                        <p id='AcQu'>Academic Qualification</p>

                        {form.academicQualification.map((value) =>
                            <textarea className='formAcQu' value={value} rows="3" cols="10" disabled={true} />)}

                        <textarea className='formAcQu' value={listTypeElements['academicQualification']} rows="3" cols="10" placeholder="Enter here" onChange={(e) => setListTypeElements(prev => {
                            prev['academicQualification'] = e.target.value;
                            return { ...prev }
                        })} />
                        < div className='Button' >
                            <input type='button' value='Add' onClick={() => handleListInput('academicQualification')} />
                            <input type='button' value='Remove' onClick={() => handleRemoveItem('academicQualification')} />
                        </div>



                    </Col>
                    <Row>
                        <div className='sbmtButton'>
                            <input type='button' value='Generate CV' onClick={onSubmit} />
                        </div>
                    </Row>
                </Row>
            </div>
        </>
    )
}
export default UserDetails;

这篇关于反应获取用户信息.(输入值)点击按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆