1.3 React使用

一、增加HTML解码功能

一）修改后

  render() {
    return (
      <Fragment>
        <div className={"formBox"}>
        <label htmlFor={"intputt"}>请输入Todo</label>
          <input id="inputt" value={this.state.inpuValue} onChange={this.handleChange} />{" "}
          <button onClick={this.handleClick}>提交</button>
        </div>
        <ul className={"list"}>
          {this.state.todos.map((x, index) => (
            <li key={index}>
              <span dangerouslySetInnerHTML={{__html:x}}>{}</span>
              <span onClick={()=>this.handleDelete(index)} className={"delete"}>删除</span>
            </li>
          ))}
        </ul>
      </Fragment>
    );
  }

 

二）修改前

  render() {
    return (
      <Fragment>
        <div className={"formBox"}>
          <input value={this.state.inpuValue} onChange={this.handleChange} />{" "}
          <button onClick={this.handleClick}>提交</button>
        </div>
        <ul className={"list"}>
          {this.state.todos.map((x, index) => (
            <li key={index}>
              <span>{x}</span>
              <span onClick={()=>this.handleDelete(index)} className={"delete"}>删除</span>
            </li>
          ))}
        </ul>
      </Fragment>
    );
  }