Ref.js:
import React, { Component, Fragment } from "react";
import TodoItem from "./TodoItem";

class Ref extends Component {

  constructor(props) {
    super(props);

    this.handleBtnClick = this.handleBtnClick.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleItemClick = this.handleItemClick.bind(this);

    this.state = {
      inputValue: 'hello React',
      list: []
    }
  }

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

  handleBtnClick() {
    const list = [...this.state.list, this.state.inputValue];
    this.setState({
      list,
      inputValue: '' //清空输入框
    })
    console.log(this.inputElem.value);
    console.log(this.state.inputValue);
  }

  handleItemClick(index) {
    const list = [...this.state.list];
    list.splice(index,1);
    this.setState({ list });
  }

  handleGetItem() {
    return this.state.list.map((value, index) => {
      return(
        <TodoItem
          content={value}
          key={index}
          index={index}
          deleteFunction={this.handleItemClick}
        />
      );
    });
  }
  render() {
    return(
      <Fragment>
        <input
          type="text"
          value={this.state.inputValue}
          onChange={this.handleInputChange}
          ref={(input) => {this.inputElem = input }}
        />
        <button onClick={this.handleBtnClick}>提交</button>
        <ul>
          {this.handleGetItem()}
        </ul>
      </Fragment>
    )
  }
}

export default Ref;


TodoItem.js
import React, {Component, Fragment} from "react";

class TodoItem extends Component {

  constructor(props) {
    super(props);

    this.handleItemClick = this.handleItemClick.bind(this);
  }

  handleItemClick() {
    // this.props.deleteFunction(this.props.index);
    const {deleteFunction, index} = this.props;
    deleteFunction(index);
  }

  render() {
    const { content } = this.props;
    return (<Fragment><li onClick={this.handleItemClick}>{content}</li></Fragment>);
  }
}

export default TodoItem;


index.js
import React from 'react';
import ReactDOM from 'react-dom';

import Ref from './Ref'

ReactDOM.render( <Ref/>, document.getElementById('root'));


this.inputElem.value 和 this.state.inputValue  这两个有什么区别吗，输出的值都是一样的