如何将div转换为输入，然后将输入转换为div（onclick）

Question

我有5个名称，单击它们后，它们将转换为带有保存按钮的输入。单击“保存”后，输入和保存消失，并且旧的div应该显示为更新的输入值。我无法使用输入值更新旧的div。请帮助。

现在，我要单击保存，并使用更新后的输入值将原始div放回原处。我快结束了，但被卡住了。

最初看起来像这样：

单击div时，看起来像这样：

[请帮助并提供详细的说明，以便我下次可以了解如何处理。

父组件

  state = {
    showNames : false,
    userNames: [],
    value: []
  }

  componentDidMount = () => {
    const {names} = this.props;
    const updatedNames = names.map((name) => ({...name, ...{isEditable: false}})); 
    this.setState({
      userNames: updatedNames
    })
  }

 inputNamesHandler = (namesIndex) => {
    const {userNames} = this.state;
    const updatedUserNameDetails = [...userNames];
    updatedUserNameDetails[namesIndex].isEditable = true;
    this.setState({userNames: updatedUserNameDetails})
  }

  saveButton = (inputValue, index) => {
    alert(inputValue + ' was clicked');
    alert(inputValue);
    alert(index);  
  }

  render() {
      return <div>
          <h1>Hello</h1>
          <div>
              {this.state.userNames.map((nameDetails, index) => {
                  if(nameDetails.isEditable) {
                    return (<div><TextArea clicked={(name) => this.saveButton(name, index)}/></div>);
                  } else {
                    return <div onClick={() => this.inputNamesHandler(index)} style={styles.namesContainer}>
                    <div style={styles.firstMargin}><FirstName firstName={nameDetails.firstName}></FirstName></div>
                    <div><LastName lastName={nameDetails.lastName}></LastName></div>
                    </div>
                  }
              })}        
          </div> 
          </div>     
    }
}

子组件

export default class TextArea extends Component {
    constructor(props) {
        super(props);
        this.state = {value:''}

        this.handleChange = this.handleChange.bind(this);
        // this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({value: event.target.value});
    }

    render() {
        console.log('Textarea was rendered')
        return (
            <div>
                <div style={styles.inputContainer}>
                <input type="text" style={styles.textField} value={this.state.value} onChange={this.handleChange}></input>
                <button type="submit" style={styles.saveButton} onClick={() => this.props.clicked(this.state.value)}>Save</button>
                </div>
            </div>
        )

    }
}

名称被保存在另一个使用props访问的组件中。

Answer 1

原因

由于您正在使用condition rendering，因此如果标志isEditable发生变化，则实际上TextArea将使用componentDidMount和componentWillUnmount lifecycle来运行整个生命周期>

if(nameDetails.isEditable) {
  return (<div><TextArea clicked={...
} else {
  return <div onClick={...
一旦重新渲染（重新安装）组件，它始终显示为''的初始化状态。

解决方案

1。通过使用某种隐藏而不是卸载

style={nameDetails.isEditable ? {display: 'none'} : {}}
2。通过props从父组件向子TextArea传递defaultValue / status，而不是在child内部使用state。并让父级控制该值。

value={this.props.value}

Answer 2

您甚至可以通过向其传递状态名称来使它们更具动态性。