import React from "react";import 'bootstrap/dist/css/bootstrap.min.css';const infoMap = { inputFocusAlertInfo: '第一个文本框获得焦点', inputChangeAlertInfo: '第一个文本框内容变为', inputBlurAlertInfo: '第一个文本框失去焦点', input2FocusAlertInfo: '第二个文本框获得焦点', input2NotFocusAlertInfo: '第二个文本框失去焦点', titleInfo: '文本框事件简单示例'}class InputListenerComp extends React.Component { constructor(props) { super(props); this.inputValue = props.inputValue; this.inputTextFocus = this.inputTextFocus.bind(this); this.inputTextChange = this.inputTextChange.bind(this); this.inputTextBlur = this.inputTextBlur.bind(this); } inputTextFocus(inputValue) { alert(infoMap.inputFocusAlertInfo); } inputTextChange(inputValue) { alert(infoMap.inputChangeAlertInfo + inputValue); } inputTextBlur(inputValue) { alert(infoMap.inputBlurAlertInfo); } render() { const inputValue = this.inputValue; return ( <input type="text"Name="input-group" value={this.inputValue} onFocus={this.inputTextFocus(inputValue)} onChange={this.inputTextChange(inputValue)} onBlur={this.inputTextBlur(inputValue)} /> ); }}class InputFocusComp extends React.Component { constructor(props) { super(props); this.inputTextFocus = this.inputTextFocus.bind(this); } inputTextFocus(inputTextFocus) { if (inputTextFocus){ alert(infoMap.input2FocusAlertInfo); inputTextFocus = !inputTextFocus; } alert(infoMap.input2NotFocusAlertInfo); } render() { return( <input type="text"Name="input-group" onFocus={this.inputTextFocus} /> ); }}const InputEventExample = () => { return ( <span> <h2>{infoMap.titleInfo}</h2> {/*注意"true"和true的差别 */} <InputListenerComp inputValue={"true"}/> <InputFocusComp inputTextFoucs={true}/> </span> );}export default InputEventExample;