ReactAppPage.jsx
Home
/
NeuralNetwork /
NeuralNetwork.UI.Web /
Scripts /
Site /
Pages /
ReactAppPage.jsx
class ReactAppPage extends React.Component {
constructor(props) {
super(props);
this.api = new API_TextRecognising();
this.state =
{
TextRecognising_Result: ""
};
this.api = new API_TextRecognising();
//@* Прикрепление текущего объекта к this в функции обработки *@
this._OnClick_Button_Clear = this._OnClick_Button_Clear.bind(this);
this._OnClick_Button_Recognized = this._OnClick_Button_Recognized.bind(this);
}
componentDidMount() {
this.canvas = new Canvas(this.refs.CanvasElem);
this.canvas.Set_UserWrite(true);
this.canvas.PrintLine();
}
_OnClick_Button_Clear() {
this.canvas.ClearCanvas();
}
_OnClick_Button_Recognized() {
let image = this.canvas.GetImage();
this.api.Request_TextRecognising(image)
.then((data) => {
this.setState({ TextRecognising_Result: data.Result });
});
}
render() {
return (
<div>
<div className="CanvasContainer">
<canvas ref={"CanvasElem"} width="500" height="300"/>
</div>
<button
type="button"
onClick={this._OnClick_Button_Clear}
className="btn btn-secondary">
Очистить
</button>
<button
type="button"
onClick={this._OnClick_Button_Recognized}
className="btn btn-secondary">
Распознать
</button>
<div className="input-group mb-3">
<div className="input-group-prepend">
<span className="input-group-text" id="basic-addon1">Result:</span>
</div>
<input type="text" readonly="readonly" value={this.state.TextRecognising_Result} className="form-control" aria-describedby="basic-addon1"/>
</div>
</div>
);
}
}
// рендеринг элемента
ReactDOM.render(
<ReactAppPage />,
document.getElementById("app")
)