时间戳

首页 > 解决方案 > 反应：不能用 onChange 改变输入

reactjs - 反应：不能用 onChange 改变输入

问题描述

我正在构建此屏幕以加载员工的详细信息/employees/:id.

工作原理：输入正确显示来自employeeDetails使用 redux 的状态的数据。

什么不起作用：输入不会改变使用onChange={(e) => setName(e.target.value)}(...orhandleChangeInput

我尝试使用defaultValue输入，但它们填充的是最后一条记录的数据，而不是当前的。这是另一个问题的材料......

import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import {listEmployeeDetails} from '../actions/employeeActions'

const EmployeeDetailsScreen = ({ match }) => {
  const [name, setName] = useState(employee.name)
  
  const dispatch = useDispatch()

  const employeeDetails = useSelector((state) => state.employeeDetails)
  const { employee } = employeeDetails

  useEffect(() => {
    dispatch(listEmployeeDetails(match.params.id))
    
  }, [dispatch, match]) 

  const handleChangeInput = (e) => {
  setName(e.target.value)
  }

  return (
    <div>
      <div className="input-group">
         <label htmlFor="name">Employee Name</label>
         <input type="text" name='name' id='empName' value={employee.name} onChange={handleChangeInput} />
      </div>
    </div>
  )

这是使用的操作，从 postgres 数据库中提取数据：

export const listEmployeeDetails = (id) => async(dispatch) => {
  try {
    dispatch({ type: EMPLOYEE_DETAIL_REQUEST })

    const { data } = await axios.get(`/api/employees/${id}`)

    dispatch({
      type: EMPLOYEE_DETAIL_SUCCESS, 
      payload: data.data.employees
    })
  } catch (error) {
    dispatch({
      type: EMPLEADO_DETAIL_FAIL,
      payload: error.response && error.response.data.message ? error.response.data.message : error.message
    })
  }
}

这是使用的减速器：

export const employeeDetailsReducer = (state = {employee: {}}, action) => {
  switch (action.type) {
    case EMPLOYEE_DETAIL_REQUEST:
      return { loading: true, employee: {} }
    case EMPLOYEE_DETAIL_SUCCESS:
      return { loading: false, employee: action.payload }
    case EMPLOYEE_DETAIL_FAIL:
      return { loading: false, error: action.payload }
    default:
      return state
  }
}

是[name, setName]不是指的同state出自employeeDetails？

标签： reactjsinputreduxstateonchange

解决方案

handleChangeInput正在改变name状态，但value你input的 指向employee.name，这是完全不同的。尝试改变value你input的name

推荐阅读