我想在用户单击输入元素时执行此操作，表单中的按钮元素将从麦克风图标更改为发送图标。我的想法是从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);

`
因此，这是我的错误
请帮帮我，谢谢！