得到受控輸入警告，但我不確定出什么問題

Question

我正在用react編寫一個表單（這是我的新手），並且在單擊將傳遞所選項目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中的工作方式有所不同，因為表單保留了一些內部狀態。 該文檔提供了很好的總結

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: '',
  }
};