时间戳

首页 > 解决方案 > React - 如果 put value = {name} 则无法输入

reactjs - React - 如果 put value = {name} 则无法输入

问题描述

我对 React 很陌生，我试图弄清楚如果我将 value = {address.suburb} 放入我的 TextField 中，为什么我不能输入我的输入：

import React from "react";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Select from "@material-ui/core/Select";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";

const FlatAddress = (props) => {
  const { navigation } = props;
  const { address } = props.formData;

  const onSubmit = (e) => {
    e.preventDefault();
    navigation.next();
    console.log(address);
  };

  return (
    <form onSubmit={onSubmit}>
      <h1>This is flat address page</h1>

      <TextField
        id="outlined-basic"
        variant="outlined"
        label="Street number"
        value={address.street}
        onChange={props.setForm}
        name="streetNumber"
        margin="normal"
        variant="standard"
        autoComplete="off"
        fullWidth
      />
    </form>
  );
};

export default FlatAddress;

这是我的另一个组件中的另一个组件：

import React from "react";
import { useForm, useStep } from "react-hooks-helper";
import FlatAddress from "./FlatAddress";
import FlatInfo from "./FlatInfo";
import FlatChecklist from "./FlatChecklist";

const defaultData = {
  firstName: "",
  lastName: "",
  age: 0,
  address: {
    street: "",
    suburb: "",
    city: "",
    country: "",
  },
  photo: "",
};

const steps = [{ id: "information" }, { id: "address" }, { id: "photo" }];

const Flat = (props) => {
  const { user } = props;
  const [formData, setForm] = useForm(defaultData);
  const { step, navigation } = useStep({
    steps,
    initialStep: 0,
  });
  const prop = { formData, setForm, navigation };

  switch (step.id) {
    case "information":
      return <FlatInfo {...prop} user={user} updateUser={props.updateUser} />;
    case "address":
      return (
        <FlatAddress {...prop} user={user} updateUser={props.updateUser} />
      );
    case "photo":
      return (
        <FlatChecklist {...prop} user={user} updateUser={props.updateUser} />
      );
  }

  return <h1>Flat Sign Up</h1>;
};

export default Flat;

我尝试了另一个组件（TextField 也是如此）并且它工作正常，但是在这个组件中它不允许我输入任何内容。

标签： reactjs

解决方案

似乎您在 TextField 上输入了错误的名称。你命名它streetNumber，但值是address.street变量。

通过阅读 react-hooks-helper 文档，输入的名称似乎必须与变量的名称相同

尝试这个：

<TextField
    id="outlined-basic"
    variant="outlined"
    label="Street number" value = {address.street} onChange = {props.setForm}
    name="adress.street" //changed name to match value variable
    margin="normal"
    variant="standard" 
    autoComplete="off"
    fullWidth
/>

推荐阅读