ReactJs：動的タグリストの使用中に小道具を使用して初期状態を設定する

Question

タグと呼ばれる配列をpropsとして送信しています。これらの配列要素が表示されるように初期状態で割り当てたいと思います。このコードを使用すると、適切に表示されますが、編集できません。私は十字をクリックすると削除されますが、いつか再び表示されます。 handelCloseメソッドのsetStateが機能していないようです。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Tag, Input, Tooltip, Button } from 'antd'; 

class EditableTagGroup extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     tags: [], 
     inputVisible: false, 
     inputValue: '', 
    }; 
    } 

    handleClose = (removedTag) => { 
    // debugger; 
    const tags = this.state.tags.filter(tag => tag !== removedTag); 
    console.log(tags); 
    // debugger; 
    this.setState({ tags: tags }); 
    } 

    showInput =() => { 
    this.setState({ inputVisible: true },() => this.input.focus()); 
    } 

    handleInputChange = (e) => { 
    this.setState({ inputValue: e.target.value }); 
    } 

    handleInputConfirm =() => { 
    const state = this.state; 
    const inputValue = state.inputValue; 
    let tags = state.tags; 
    if (inputValue && tags.indexOf(inputValue) === -1) { 
     tags = [...tags, inputValue]; 
    } 
    console.log(tags); 
    this.setState({ 
     tags, 
     inputVisible: false, 
     inputValue: '', 
    }); 
    this.props.onSelect(tags); 
    } 

    // componentDidUpdate(prevProps, prevState) { 
    // this.setState({tags: this.props.tags}) 
    // } 

    componentDidUpdate(prevProps, prevState) { 
    // debugger; 
    if (this.state.tags !== this.props.tags) { 
     this.setState({tags: this.props.tags}) 
    } 
    } 

    saveInputRef = input => this.input = input 

    render() { 
    const {tags , inputVisible, inputValue } = this.state; 
    return (
     <div> 
     {tags.map((tag, index) => { 
      const isLongTag = tag.length > 20; 
      const tagElem = (
      <Tag key={tag} closable={index !== -1} afterClose={() => this.handleClose(tag)}> 
       {isLongTag ? `${tag.slice(0, 20)}...` : tag} 
      </Tag> 
     ); 
      return isLongTag ? <Tooltip title={tag} key={tag}>{tagElem}</Tooltip> : tagElem; 
     })} 
     {inputVisible && (
      <Input 
      ref={this.saveInputRef} 
      type="text" 
      size="small" 
      style={{ width: 78 }} 
      value={inputValue} 
      onChange={this.handleInputChange} 
      onBlur={this.handleInputConfirm} 
      onPressEnter={this.handleInputConfirm} 
      /> 
     )} 
     {!inputVisible && <Button size="small" type="dashed" onClick={this.showInput}>+ New Tag</Button>} 
     </div> 
    ); 
    } 
} 

export default EditableTagGroup 

Answer 1

問題は、あなたがしかし、毎回コンポーネントのアップデートは、あなたが戻っ小道具に状態を設定している、これらの変更後、保存してローカル状態に小道具を使用しているということです。

// this is where you are setting the state back to 
// props and hence your edit disappears 
componentDidUpdate(prevProps, prevState) { 
    // debugger; 
    if (this.state.tags !== this.props.tags) { 
     this.setState({tags: this.props.tags}) 
    } 
    } 

あなたがする必要があるのは、親のハンドラを渡して小道具を更新することによって、小道具を状態で維持するのではなく、直接修正することです。

親にこの合格する方法についての回答と更新データを参照してください

How to pass data from child component to its parent in ReactJS?