Question

当所有模型字段都是标量并以1：1的比例映射到输入时，可以轻松创建具有受控输入的表单。

但是如果该领域是复合的呢？为了确定，我们假设该模型具有coordinates属性，如下所示：

{
    ...
    coordinates: {
        x: 10,
        y: 20,
        projection: 1234
    }
}

让我们在表单中说有一个文本输入用于管理这个字段。

因此，我可以轻松地将序列化点的输入初始化为(x, y)（投影无法修改）。

但是，由于受控输入会在每次更改时改变模型 - 因此会出现问题：如果输入不包含有效的序列化点，该怎么办？与foobar一样。

此字符串无法反序列化回x-y-projection，并且不清楚存储此中间无效结果的位置，因为受控元素会触发模型更改并重新呈现。

所以我的问题 - 如何在这种情况下表示数据以及如何在应用中解决它？

Answer 1

您使用州。输入组件只有在具有有效值时才应向其父级发送有关值更改的消息。您可以设置子组件状态，以跟踪更改的无效值，然后在完成后向父组件发送消息。它可能看起来像这样。（这是一个有效的codepen，请注意如果在输入中键入字母，标签不会改变）

class PointInput extends React.Component {
  constructor(props, ...args) {
    super(props, ...args);
    this.state = { x: props.x, y: props.y};
  }
  update = (newValue) => {
    newValue = Object.assign({}, this.state, newValue);
    this.setState(newValue);
    if (Number.isNaN(+newValue.x) || Number.isNaN(+newValue.y)) return;
    this.props.onChange(newValue);
  }
  render() {
    return (
      <div>
        {'X: '}<input value={this.state.x} onChange={(e) => this.update({x: e.target.value})} />
        {'Y: '}<input value={this.state.y} onChange={(e) => this.update({y: e.target.value})} />
      </div>
    );
  }
}

Answer 2

不依赖于如何保存数据（状态/无状态），可以在状态/存储中存储无效数据，并在组件的渲染方法中相对处理它。

任何其他条款都可以带来更清晰，更完整的答案

受控输入和复合类型

2 个答案: