I now have multiple custom components written separately that contain input tags, and then a page calls multiple custom components to share an onKeyUp event, but I find that e.target returns an input tag, so it is difficult to determine which custom component triggered the event by input.
Code
keyUpHandle(e)
{
console.log(e.target);
} <NoticeLineInput title=":"
Ustyle={defaultStyle}
placeholder=""
onKeyUp={this.keyUpHandle}
key="name"/>
<NoticeLineInput title=":"
Ustyle={defaultStyle}
placeholder=":yyyy-MM-dd HH:mm:ss"
onKeyUp={this.keyUpHandle}
key="time"/>
<NoticeLineInput title=":"
placeholder=""
onKeyUp={this.keyUpHandle}
type="colorPicker"
key="mainColor"/>Custom components
render() {
return (
<div className="inputBox">
{this.props.placeValue}
<input type={this.props.type?this.props.type:"text"}
className="defaultInput"
value={this.state.value}
defaultValue={this.props.defaultValue?this.props.defaultValue:""}
style={this.props.Ustyle?this.props.Ustyle:{}}
placeholder={this.props.placeholder?this.props.placeholder:"..."}
onKeyUp={this.props.onKeyUp?this.props.onKeyUp:()=>{}}
onChange={this.onValueChange}
onFocus={this.props.onFocus?this.props.onFocus:()=>{}}
key={this.props.key?this.props.key:""}
ref="uname"/>
</div>
)
}uses a stupid way to add an id, to the custom component to Input, and then distinguish it according to id.
I hope there is a better way!