无法更改输入字段中的值答案

【问题标题】：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 “并将其存储”在哪里？父组件？这个组件的状态？您的问题中没有足够的信息来获得正确答案，请包括使用的整个父组件，以及引用的任何函数。

标签： javascript html reactjs redux state

【解决方案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}
/>

【讨论】：