javascript - 如何将div转换为输入，然后将输入转换为div(onclick)

Question

我有 5 个名字，单击它们时，它们会转换为带有保存按钮的输入。单击保存时，输入和保存消失，旧的 div 应该显示更新的输入值。我无法使用输入值更新旧的 div。请帮忙。

Now I want to click on save and get the original div back in it's place with the updated input value. I am almost at the end but stuck.

最初看起来像这样:

点击 div 时，它看起来像这样:

Please help and give a detailed explanation so that I can understand how to go about it from the next time.

父组件

  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

这是您所期待的。

有更好的方法，但这只是一种蛮力方法。

class App extends React.Component {
  state = {
    one: { firstName: "Player", lastName: "One" },
    two: { firstName: "Two", lastName: "Player" },
    three: { firstName: "Three", lastName: "Player" },
    four: { firstName: "Four", lastName: "Player" },
    five: { firstName: "Five", lastName: "Player" }
  };

  oneUpdate = updatedValue => {
    this.setState({
      one: {
        firstName: updatedValue.firstName,
        lastName: updatedValue.lastName
      }
    });
  };

  twoUpdate = updatedValue => {
    this.setState({
      two: {
        firstName: updatedValue.firstName,
        lastName: updatedValue.lastName
      }
    });
  };

  threeUpdate = updatedValue => {
    this.setState({
      three: {
        firstName: updatedValue.firstName,
        lastName: updatedValue.lastName
      }
    });
  };

  fourUpdate = updatedValue => {
    this.setState({
      four: {
        firstName: updatedValue.firstName,
        lastName: updatedValue.lastName
      }
    });
  };

  fiveUpdate = updatedValue => {
    this.setState({
      five: {
        firstName: updatedValue.firstName,
        lastName: updatedValue.lastName
      }
    });
  };

  render() {
    const { one, two, three, four, five } = this.state;
    return (
      <div>
        <PlayerBlock name={one} update={this.oneUpdate} />
        <PlayerBlock name={two} update={this.twoUpdate} />
        <PlayerBlock name={three} update={this.threeUpdate} />
        <PlayerBlock name={four} update={this.fourUpdate} />
        <PlayerBlock name={five} update={this.fiveUpdate} />
      </div>
    );
  }
}

class PlayerBlock extends React.Component {
  state = {
    editMode: false,
    userName: {},
    firstName: "",
    lastName: ""
  };

  componentDidMount() {
    // this.setState({userName:this.props.name});
    this.setState({
      firstName: this.props.name.firstName
    });
    this.setState({
      lastName: this.props.name.lastName
    });
  }

  sendData = () => {
    this.props.update({
      firstName: this.state.firstName,
      lastName: this.state.lastName
    });
    this.setState({ editMode: false });
  };

  render() {
    var { editMode } = this.state;
    return (
      <div>
        {this.state.editMode ? (
          <div>
            <input
              value={this.state.firstName}
              onChange={e => this.setState({ firstName: e.target.value })}
            />
            <input
              value={this.state.lastName}
              onChange={e => this.setState({ lastName: e.target.value })}
            />
            <button onClick={() => this.sendData()}>Save</button>
          </div>
        ) : (
          <div onClick={() => this.setState({ editMode: true })}>
            {this.props.name.firstName} {this.props.name.lastName}
          </div>
        )}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>