我正在尝试研究如何使用打字稿和反应js。我遵循此link并成功安装了文件。这是package.json

{
  "name": "proj",
  "version": "1.0.0",
  "description": "hello world",
  "main": "index.js",
  "scripts": {
    "test": "sample"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/react": "^0.14.55",
    "@types/react-dom": "^0.14.19",
    "react": "^15.4.1",
    "react-dom": "^15.4.1"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^3.0.0-beta.17",
    "source-map-loader": "^0.1.5",
    "typescript": "^2.1.4",
    "webpack": "^1.14.0",
     "todomvc-app-css": "^2.0.0",
    "todomvc-common": "^1.0.0"
  }
}


这是我的tsx的代码。

import * as React from "react";
import * as ReactDOM from "react-dom";

export interface ItemProps { todoItem:string; getIndex:number; onDelete:any; onEdit:any; onChange:number}
interface ItemState {clickEdit:string;text:string}


export class TodoItem extends React.Component<ItemProps, ItemState> {

    public state:ItemState;


    constructor(props:ItemProps){
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.state = {clickEdit:"",text:this.props.todoItem};
    }
    public handleChange(e) {
        this.setState({text: e.target.value});
    }
    public handleSubmit(e){

        this.setState({clickEdit:""});
    }
    public delete(){
        this.props.onDelete(this.props.getIndex);
    }
    public edit(){

        var node = React.findDOMNode<HTMLInputElement>(this.refs["editField"]);
        node.focus();
        this.setState({clickEdit:"editing"});
        this.props.onEdit(this.props.getIndex);
    }
    public render() {

       return (
                <li className={this.state.clickEdit}>
                    <div className="view">
                        <label onDoubleClick={e => this.edit()}>{this.props.todoItem}</label>
                        <button className="destroy" onClick={e => this.delete()}></button>
                    </div>
                     <input ref="editField" className="edit" onBlur={e => this.handleSubmit(e)} value={this.state.text} onChange={e => this.handleChange(e)} autoFocus={true} />
                </li>
               );
    }
}


我不知道为什么我不能使用findDOMNode。我已经导入了REACT。我会丢失文件中的某些内容还是需要安装某些内容?

最佳答案

尝试import ReactDOM from 'react-dom'; ReactDOM.findDOMNode()

10-06 06:07