无法更改输入字段中的值

Posted 2023-02-22

【中文标题】无法更改输入字段中的值

【英文标题】：Cannot change value in input fields

【发布时间】：2019-12-02 21:36:41

【问题描述】：

这是我的代码：

<Input
      onChange=(e) => someChange(e)
      valid=check.length !== 0
      invalid=check.length === 0
      type="text"
      name="name"
      id="name"
      placeholder=something
      value=props.someProp ? props.user.name : ''
/>

所以这里发生的是当我输入props.someProp 我的值被检索。问题是我无法编辑该字段。请注意user 对象会在此屏幕出现时填充。

我怎样才能进行某种健全性检查，以便我仍然得到填充的值，但我可以在之后对其进行编辑？

谢谢。

【问题讨论】：

您不能动态更改props - 您必须将它们存储在state 中。也可以提供someChange的代码

someChange 是做什么的？也许如果你像value= props.user.name? '' : props.someProp这样反转逻辑？

someChange 基本上得到e.target.value 并存储它。

您也不一定需要有效和无效，因为一个布尔值将与另一个布尔值相反

@MisterMister “并将其存储”在哪里？父组件？这个组件的状态？您的问题中没有足够的信息来获得正确答案，请包括使用 的整个父组件，以及引用的任何函数。

【参考方案1】：

如果您使用的是无状态组件AND React 16.8+，请使用 hooks。这将允许您的stateless component 包含state。 React 调用这些function components。

您之前可能将这些称为“无状态组件”。我们现在引入了从这些中使用 React 状态的能力，因此我们更喜欢使用“函数组件”这个名称。

示例

const Foo = props => 
  const [name, someChange] = useState(props.someProp ? props.user.name : '');

  return (
    <Input
      onChange=(e) => someChange(e.target.value)
      value=name
      ...
    />
  );

可以在here找到有关钩子的文档。

【参考方案2】：

设置组件挂载的初始状态。之后，输入的值将设置在 onChange 上。

constructor(props)
  super(props);
  this.state(name:'');


componentDidMount()
  this.setState(name: props.someProp ? props.user.name : '');


someChange(e)
 let name = e.target.name;
 this.setState([name]: e.target.value);


<Input
  onChange=(e) => someChange(e)
  valid=check.length !== 0
  invalid=check.length === 0
  type="text"
  name="name"
  id="name"
  placeholder=something
  value=this.state.name
/>