反应 - 如果 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)并且它工作正常,但在这个组件中它不允许我输入任何内容。

艾伦·威廉·杜阿尔特

似乎您在 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
/>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如果使用“value”字段,则无法更改 React 输入组件的值

如果名称在反应时上面有空格,则无法打开弹出窗口

更新反应后发生错误:TypeError:如果没有| new |,则无法调用类构造函数

子手游戏-如果输入的字母序列混乱,则无法将输入的字母与单词匹配

如果我更改了数字输入的格式,则无法使用闪亮的书签

如果分数超过100,则无法显示“无效分数。请重新输入”

如果输入具有属性onfocus =“ this.blur(),则无法读取全文

如果输入值为空格,则禁用按钮?反应

反应:如果输入值等于对象键,则显示键值

e.target.value onChange 输入反应

反应组件的“如果”简写

如果输入有值则反应显示元素,如果为空则隐藏

如果否则无法正常工作 JAVA

反应动态输入的未定义的 event.target.value

如果为空,则对反应形式的角度验证应打开或关闭,但如果输入为空,则不进行切换

无法在输入字段中输入反应

如果没有进行编辑,输入字段不会保持原始值反应

如果表单中有许多文本输入(钩子),如何提高反应性能?

反应useState问题与event.target.value无法正确更新?

反应:如果在onRowSelection中使用setState,则Material-ui tableRow无法选择

如果XML文件为空,则无法返回int

如果隐藏了溢出,则无法显示:before和:after

Python:如果 JSON 响应为空,则无法工作

如果发生标准错误,则无法进行Gradle构建

如果包含美元符号 (${var}),则无法读取属性

如果未设置会话,则无法执行脚本

如果名称中有空格,则无法搜索

Hazelcast:如果使用编程配置,则无法加入群集

如果值包含“”,则无法解析csv文件