【React】【Ant Design】解决React中使用Antd输入框，点击按钮清空输入框内容的问题

场景

我做了一个Todo，想要在输入todo内容点击添加按钮后，该内容添加到Todo列表，同时清空输入框的内容。

完整代码

import React, { Component } from 'react'
import { Input, Button } from 'antd';
import { nanoid } from 'nanoid';
import { createAddTodoAction } from '../../../redux/actions/todo';
import getTime from '../../../utils/getTime'
import { connect } from 'react-redux'
class Header extends Component {
    state={
        inputValue:''
    }


    keyUp =(event)=>{
        this.setState({
            inputValue:event.target.value
        })
    }
    addTodo = () => {
        let value = this.state.inputValue
        if (value.trim() !== '') {
            let todoObj = { id: nanoid(), name: value, done: false, time: getTime(),color:'honeydew' }
            
            this.props.addTodo(todoObj)
            this.setState({
                inputValue:''
            })
            
            
        }else return

    }
    render() {
        return (
            <div>
                <Input.Group compact style={{ display: 'flex', flexDirection: 'row' }}>
                    <Input
                    onChange={this.keyUp}
                        placeholder="enter todo content"
                        value={this.state.inputValue}
                        allowClear
                    />
                    <Button type="primary" onClick={this.addTodo}>Add</Button>
                </Input.Group>
            </div>
        )
    }
}

export default connect(
    state => ({
        todoList: state.todoList
    }),
    {
        addTodo: createAddTodoAction
    }
)(Header)

---

解决过程

一、给Input框绑定value值

 <Input
   value={this.state.inputValue}
/>

二、设定state初始值

state={
        inputValue:''
    }

三、给input框绑定键盘事件，修改绑定值

 <Input
   value={this.state.inputValue}
   onChange={this.keyUp}
/>

    keyUp =(event)=>{
        this.setState({
            inputValue:event.target.value
        })
    }

四、设置按钮点击事件

<Button type="primary" onClick={this.addTodo}>Add</Button>

为了简洁，我删除了不必要的代码。

addTodo = () => {
            this.setState({
                inputValue:''
            })

错误实现：使用ref绑定输入框

代码案例

<Input
    placeholder="enter todo content"
	ref={c=>this.inputValue=c}
    allowClear
/>

但使用下面的代码无法清空输入框的内容

this.inputValue.input.value=''