Question

我有一个使用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))

Answer 1

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

应该是

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

不？

Answer 2

感谢@UXDart的帮助

您要更改“ workoutCompleted”，然后检查属性内部事件“锻炼” ...反正IMO为此使用状态，并发送给提交表单时

文字栏无法追踪文字

2 个答案: