Question

我正在写一个反应表单（我是新手），单击一个将传递所选项目ID的菜单项后，该表单将打开。第一次加载很好，但当我点击其中一个输入并输入内容时，我得到：

组件正在更改类型文本的受控输入以使其不受控制。输入元素不应从受控切换到不受控制（反之亦然）。决定在组件的生命周期内使用受控或不受控制的输入元素。

我不知道如何解决这个问题，因为我读到的地方告诉我，如果我使用undefined初始化它，我的组件会给我这个消息，我不认为我是在这种情况下。

class EditMenu extends React.Component {
  constructor(props) {
    super(props);
    console.log('props constructor:', props);
    this.state = {
      item: {}
    };
    this.itemTitleName = 'name';
    this.itemTitleDescription = 'description';
    this.itemTitletag = 'tag';
  }

  componentWillMount() {
    console.log('will mount');
    let itemId = this.props.selectedItem;
    let item = this.getitemItem(itemId);
    this.setState({ item: item });
  }

  getitemItem(itemId) {
    const itemsInfo = [
      {
        id: 44,
        title: 'title1',
        description: 'desc1',
        tag:''
      },
      {
        id: 11,
        title: 'title2',
        description: 'desc2',
        tag:''
      },
      {
        id: 222,
        title: 'tiotle3',
        description: 'desc3',
        tag:''
      },
    ];

    let item = _.find(itemsInfo, { id: itemId });
    return item;
  }

  componentWillReceiveProps(nextProps) {
    console.log('received props!')
    const nextId = nextProps.selectedItem;
    if (nextId !== this.state.item.id) {
      this.setState({ item: this.getitemItem(nextId) });
    }
  }

  handleInputChange = (event) => {
    console.log('input change ');
    const target = event.target;
     const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    console.log(name);
    this.setState({
      item: {
        [name]: value
      }
    });
  }

  render() {
    return (
      <div className="form-container">
        <form onSubmit={this.handleSubmit} >

          <TextField
            id="item-name"
            name={this.itemTitleName}
            label="item Name"
            margin="normal"
            onChange={this.handleInputChange}
            value={this.state.item.title}
          />
          <br />
          <TextField
            id="item-desc"
            name={this.itemTitleDescription}
            label="item Description"
            margin="normal"
            onChange={this.handleInputChange}
            value={this.state.item.description}
          />
          <br />
          <TextField
            className="tag-field-container"
            name={this.itemTitletag}
            label="tag"
            type="number"
            hinttext="item tag" />

          <br /><br />
          Photos:
          <br /><br />

          <Button variant="raised" onClick={this.handleSaveButtonClick} className="button-margin">
            Save
          </Button>

        </form>
      </div>
    );
  }
}

Answer 1

表单在React中的工作方式不同，因为表单保留了一些内部状态。 documentation提供了良好的运行

Answer 2

我读过的地方告诉我，我的组件会给我这个消息如果我用undefined初始化它，我不认为我在这种情况下。

其实你是：）））

你的州在开始时是一个空对象：

this.state = {
  item: {}
};

这意味着：

this.state.item.description
this.state.item.title

...未定义。这就是您以value - undefined传递给控件的内容。

<TextField
   ...
   value={this.state.item.title}
/>
<br />
<TextField
   ...
   value={this.state.item.description}
/>

尝试设置初始值：

this.state = {
  item: {
    description: '',
    title: '',
  }
};

获得受控输入警告，但我不确定有什么问题

2 个答案: