Question

以下是我与此相关的代码段：

父母：

class PropertyBar extends Component {
  state = {
    selectedCell: graph.selectedCell,
    cellProperties: []
  }

  updateSelectedCell() {
    if (graph.selectedCell != null) {
      this.setState({
        selectedCell: graph.selectedCell,
        cellProperties: Array.from(graph.selectedCell.value.attributes)
      });
    }
  }

  onChangeHandler = (e) => {
    console.log(e.target.value);
    let cellProperties = [...this.state.cellProperties];
    cellProperties[parseInt(e.target.id)] = e.target.value;
    this.setState({cellProperties});
  }

  renderPropertyList() {
    return this.state.cellProperties.map((key, i) => {
      return <PropertyBarItem name={key.nodeName} value={key.nodeValue} onChange={this.onChangeHandler} key={i} id={i} />
    })
  }

孩子：

class PropertyBarItem extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <ListItem divider={true} className="property-bar-item">
        <TextField
          id={this.props.id.toString()}
          label={this.props.name}
          value={this.props.value}
          margin="dense"
          onChange={(e) => this.props.onChange(e)}
        />
      </ListItem>
    )
  }
}

当我尝试更改value中的<TextField>时，它会丢失与之配对的原始label，并且我认为它与父级组件状态之间存在任何关系。 / p>

然后我得到这个错误：组件正在将文本类型的受控输入更改为不受控制。输入元素不应从受控状态切换到非受控状态（反之亦然）。在组件的使用寿命中决定使用受控还是不受控制的输入元素。

我知道这可能是由于我的cellProperties状态开头是一个空数组，但是我的Child组件直到该数组中实际有值时才呈现。我已经对value字段（例如value={this.props.value ? this.props.value : ""}）进行了三元运算，但是当我尝试键入时，它总是返回一个空字符串。

Answer 1

所以我的问题的答案是，由于我将NamedNodeMap转换为Array，因此我忘记在状态下添加要在数组中更改的属性。

因此，我应该分配给的正确值是cellProperties[parseInt(e.target.id)] = e.target.value;，而不是cellProperties[parseInt(e.target.id)].nodeValue = e.target.value;。

现在一切都正常了！

组件将文本类型的受控输入更改为不受控制

1 个答案: