ReactJS - 如何使用 React Bootstrap 将输入的值保存到状态答案

【问题标题】：ReactJS - How to save the inputted value to a state using React BootstrapReactJS - 如何使用 React Bootstrap 将输入的值保存到状态
【发布时间】：2020-11-29 05:49:36
【问题描述】：

我使用 React-Bootstrap 创建了一个表单，但我遇到了问题，问题是我无法将值保存到我的状态

这是我的代码

const StudentsForm = (props) => {

    const initialFormState = { firstName: '', lastName: ''}

    const [students, setStudents] = useState(initialFormState)

    const handleInputChange = (event) => {
        const { name, value } = event.target

        setStudents({ ...students, [name]: value })

    }  

    const submit = () => {
        console.log('Values are', students)
    }  
     
    return (
         <Form onSubmit={submit}>
           <Form.Row>
                    <Form.Group as={Col}>
                        <Form.Label>First Name</Form.Label>
                        <Form.Control type="text" placeholder="Enter First Name" value={students.firstName} onChange={handleInputChange}/>
                    </Form.Group>

                    <Form.Group as={Col}>
                        <Form.Label>Last Name</Form.Label>
                        <Form.Control type="text" placeholder="Enter Last Name" value={students.lastName} onChange={handleInputChange} />
                    </Form.Group>
                </Form.Row>

                <Button variant="primary" type="submit">
                    Submit
                </Button>
         </Form>
 
        )
}

export default StudentsForm

而且每当我在<Form.Control /> 中添加值时，我什至无法在上面输入。

预期的输出是值应该保存到一个状态，当我单击提交按钮时，在文本字段中输入的值应该记录在控制台中。

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案1】：

由于您要根据从组件的 onChange 事件中获取的“名称”属性存储状态，因此您需要将其包含在您的属性中。

<Form onSubmit={submit}>
  <Form.Row>
    <Form.Group as={Col}>
      <Form.Label>First Name</Form.Label>
      <Form.Control
        type="text"
        name="firstName" //<--------here, available as event.target.name in the onChange event
        placeholder="Enter First Name"
        value={students.firstName}
        onChange={handleInputChange}
      />
    </Form.Group>

    <Form.Group as={Col}>
      <Form.Label>Last Name</Form.Label>
      <Form.Control
        type="text"
        name="lastName" //<--------here, available as event.target.name in the onChange event
        placeholder="Enter Last Name"
        value={students.lastName}
        onChange={handleInputChange}
      />
    </Form.Group>
  </Form.Row>

  <Button variant="primary" type="submit">
    Submit
  </Button>
</Form>

【讨论】：

【解决方案2】：

const submit = (e) => { //on click submit you can console you state
        e.preventDefault();
        console.log('Values are', students)
    }
        return(
    <>
           <Form.Control
                type="text"
                placeholder="Enter First Name"
                name="firenter code herestName" // You have to provide name here
                value={students.firstName} 
                onChange={handleInputChange} />
           
        
    
            <Form.Control
                        type="text"
                        placeholder="Enter Last Name"
                        name="lastName" // Here also
                        value={students.lastName} onChange={handleInputChange} />
    
    <>
        
        )

【讨论】：