我正在尝试研究如何使用打字稿和反应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()
。