TypeError：无法读取未定义的 React 类组件的属性“onMouse”

Posted 2023-03-07

【中文标题】TypeError：无法读取未定义的 React 类组件的属性“onMouse”

【英文标题】：TypeError: Cannot read property 'onMouse' of undefined React Class Component

【发布时间】：2021-09-20 15:12:44

【问题描述】：

当用户单击输入元素并且表单中的按钮元素将从麦克风图标更改为发送图标时，我想这样做。我的想法是从 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);

`

因此，这是我的Error

请帮帮我，谢谢！

【参考方案1】：

试试这个。我认为使用箭头函数可以解决使用this 的问题。当你将它传递给onClick时，你不应该调用这个函数

renderInput = (formProps) => 
    
    return <input 
        onChange=formProps.input.onChange
        value=formProps.input.value
        placeholder="Message" 
        onClick=this.onMouse
    />