提问人:Chizi56 HappyCity 提问时间:7/11/2021 更新时间:7/11/2021 访问量:30
TypeError:无法读取未定义的 React 类组件的属性“onMouse”
TypeError: Cannot read property 'onMouse' of undefined React Class Component
问:
当用户单击“输入元素”时,我想这样做,表单中的按钮元素将从麦克风图标更改为“发送”图标。我的想法是从onClick或mouseEnter处理程序中获取值,并通过if-else语句传递它并设置正确的图标
这是我的代码 `
import React, { Component } from 'react'
import { Field, reduxForm } from 'redux-form';
import InsertEmoticonIcon from '@material-ui/icons/InsertEmoticon';
import AttachFileIcon from '@material-ui/icons/AttachFile';
import MicIcon from '@material-ui/icons/Mic';
import SendIcon from '@material-ui/icons/Send';
import styled from 'styled-components'
import './MessageSender.css'
export class MessageSender extends Component {
constructor(props){
super(props);
this.state = {
bool: 'false'
}
this.onMouse = this.onMouse.bind(this);
}
onMouse(){
this.setState({bool: "true"})
}
renderInput(formProps){
return <input
onChange={formProps.input.onChange}
value={formProps.input.value}
placeholder="Message"
onClick={this.onMouse()}
/>
}
onSubmit(formValues){
console.log(formValues);
}
check(){
// return <Send />
if(this.state.bool === 'true'){
return <Send />
}else{
return <Mic />
}
}
render() {
return (
<form autoComplete="off" onSubmit={this.props.handleSubmit(this.onSubmit)}>
<Emotion />
<Field name="Message" component={this.renderInput} placeholder="Message" />
<Attach />
<button>
{this.check()}
</button>
</form>
)
}
}
const Emotion = styled(InsertEmoticonIcon)`
width: 40px!important;
height: 40px!important;
color: rgb(170,170,170);
`
const Attach = styled(AttachFileIcon)`
width: 40px!important;
height: 40px!important;
color: rgb(170,170,170);
margin-right: 0.3rem;
`
const Mic = styled(MicIcon)`
`
const Send = styled(SendIcon)`
`
export default reduxForm({
form: 'message'
})(MessageSender);
`
因此,这是我的错误
请帮帮我,谢谢!
答:
0赞
Ace
7/11/2021
#1
试试这个。我认为使用箭头函数将解决使用 .当你将函数传递给this
onClick
renderInput = (formProps) => {
return <input
onChange={formProps.input.onChange}
value={formProps.input.value}
placeholder="Message"
onClick={this.onMouse}
/>
}
评论