Question

我想当用户点击输入元素时，表单中的按钮元素将从麦克风图标变为发送图标。我的想法是从 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

请帮帮我，谢谢！

Answer 1

试试这个。我认为使用箭头函数可以解决使用 this 的问题。当您将其传递给 onClick

时，您不应该调用该函数

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

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

1 个答案: