Javascript 文本字段不跟踪文本

我有一个使用react redux和material ui的论坛设置。所有文本字段似乎都没有跟踪本应跟踪的状态变化

因此，当用户尝试在文本字段中键入内容时，什么也不会发生

onChange={e =>
              onTextFieldChange("workoutCompleted", e.target.value)
            }

这里是论坛代码的其余部分，我相信这是一个真正简单的修复

import React from "react"
import { connect } from "react-redux"
import TextField from "@material-ui/core/TextField"
import Button from "@material-ui/core/Button"
import CustomSnackBar from "../Components/customSnackBar"
import { withStyles } from "@material-ui/core/styles"
import { NEW_WORKOUT_FORM_UPDATED } from "../constants"
import { createNewWorkout } from "../action-creators/events"

const styles = theme => ({
  input: {
    width: "50%",
    marginLeft: 16,
    marginTop: 16,
    marginBottom: 10,
    color: "red"
  },
  button: {
    color: "secondary"
  }
})

class NewWorkout extends React.Component {
  componentDidMount() {
    console.log("componentDidMount!!!")
  }

  render() {
    console.log("RENDER!!!")
    const { workout, duration, eventDateTime } = this.props.event
    const {
      isError,
      isSaving,
      errorMsg,
      classes,
      onTextFieldChange,
      createWorkout,
      history
    } = this.props

    return (
      <div style={{ paddingTop: 56 }}>
        <form autoComplete="off" onSubmit={createWorkout(history)}>
          <TextField
            label="Workout"
            value={workout}
            onChange={e =>
              onTextFieldChange("workoutCompleted", e.target.value)
            }
            margin="normal"
            required
            className={classes.input}
          />
          <TextField
            label="Duration"
            value={duration}
            onChange={e => onTextFieldChange("Duration", e.target.value)}
            margin="normal"
            required
            className={classes.input}
            multiline
          />

          <TextField
            label="Date"
            value={eventDateTime}
            clickable="false"
            margin="normal"
            required
            className={classes.input}
          />

          <div style={{ paddingTop: 50 }}>
            <Button
              className={classes.button}
              color="red400"
              variant="contained"
              type="submit"
              aria-label="add"
            >
              SUBMIT
            </Button>
          </div>
        </form>
        {isError && <CustomSnackBar message={errorMsg} snackType="error" />}
        {isSaving && <CustomSnackBar message="Saving..." snackType="info" />}
      </div>
    )
  }
}

const mapStateToProps = state => {
  console.log("What is state?", state)

  return {
    event: state.newWorkout.data,
    isError: state.newWorkout.isError,
    isSaving: state.newWorkout.isSaving,
    errorMsg: state.newWorkout.errorMsg
  }
}

const mapActionsToProps = dispatch => {
  return {
    onTextFieldChange: (key, value) => {
      dispatch({ type: NEW_WORKOUT_FORM_UPDATED, payload: { [key]: value } })
    },
    createWorkout: history => e => {
      e.preventDefault()
      dispatch(createNewWorkout(history))
    }
  }
}

const connector = connect(
  mapStateToProps,
  mapActionsToProps
)

export default connector(withStyles(styles)(NewWorkout))

从“React”导入React
从“react redux”导入{connect}
从“@material ui/core/TextField”导入TextField
从“@material ui/core/Button”导入按钮
从“./组件/CustomSnackBar”导入CustomSnackBar
从“@material ui/core/styles”导入{withStyles}”
从“./常量”导入{NEW_-WORKOUT_-FORM_-UPDATED}
从“./动作创建者/事件”导入{createNewWorkout}
常量样式=主题=>({
输入：{
宽度：“50%”，
marginLeft:16，
玛金托普：16，
marginBottom:10，
颜色：“红色”
},
按钮：{
颜色：“次要”
}
})
类newreact.Component{
componentDidMount（）{
console.log（“componentDidMount！！！”）
}
render（）{
console.log（“渲染！！！”）
const{workout，duration，eventDateTime}=this.props.event
常数{
伊瑟罗，
伊萨维，
errorMsg，
班级，
onTextFieldChange，
创造训练，
历史
}=这是道具
返回(
onTextFieldChange（“workoutCompleted”，例如target.value）
}
margin=“正常”
必修的
className={classes.input}
/>
onTextFieldChange（“Duration”，e.target.value）}
margin=“正常”
必修的
className={classes.input}
多行
/>
提交
{isError&&}
{isSaving&&}
)
}
}
常量mapStateToProps=状态=>{
日志（“什么是状态？”，状态）
返回{
事件：state.newWorkout.data，
iSeries错误：state.newWorkout.iSeries错误，
isSaving:state.newWorkout.isSaving，
errorMsg:state.newWorkout.errorMsg
}
}
const mapActionsToProps=调度=>{
返回{
onTextFieldChange：（键，值）=>{
分派（{type:NEW\u-WORKOUT\u-FORM\u-UPDATED，有效负载：{[key]：value}}）
},
createWorkout:history=>e=>{
e、 预防默认值（）
调度（创建新训练（历史））
}
}
}
常数连接器=连接(
MapStateTops，
mapActionsToProps
)
导出默认连接器（带样式（样式）（新训练））

应该是

onChange= e => {
              onTextFieldChange("workoutCompleted", e.target.value)
            }

---

没有？

谢谢@UXDart的帮助

您正在更改“workoutCompleted”，但随后检查属性 内部活动“训练”。。。无论如何，我会使用state，然后发送到 提交表单时进行重新编辑

---

您正在更改“workoutCompleted”，但随后检查事件“workout”中的属性。。。无论如何，我将使用state，并在提交需要执行的表示javascript的prop的formno@dgeare{}时发送到redux。

onChange= e => {
              onTextFieldChange("workoutCompleted", e.target.value)
            }