Reactjs React | Redux Form |字段为字段分配状态

我正在尝试创建自定义按钮来更改输入字段的状态值，但是当表单提交时，字段不会显示在表单值中。我使用的是“redux表单”中的字段，当用户单击按钮时，角色的状态发生了变化，输入字段的值也发生了变化，但它没有显示在表单值中，但如果手动键入（不带状态），则可以正常工作

class Registration extends React.Component {
    state = {role: 'student'};

    renderInput = ({input, label, type, placeholder, meta, role}) => {
        return (
            <div>
                <label htmlFor="">{label}</label>
                <input className="d-block w-100" {...input} type={type} placeholder={placeholder} value={role}/>
                {this.renderError(meta)}
            </div>
        )
    };

    render() {
        let role = this.state.role;

        return (
            <div className="mt-2 mx-auto">
            <Field type="text" name="user_role" component={this.renderInput}
                   label="Ваша роль" placeholder="****"/>

            <div className="mt-2 row w-100">
                <div className="col ml-3 m-0 p-0">
                    <div className={`btn btn-black-outline w-100 role-student-${role}`}
                         onClick={() => {
                             this.setState({role: 'student'})
                         }}>Ученик
                    </div>
                </div>

                <div className="col m-0 p-0">
                    <div className={`btn btn-black-outline w-100 role-teacher-${role}`} onClick={() => {
                        this.setState({role: 'teacher'})
                    }}>Учитель
                    </div>
                </div>
            </div>
        </div>
    )
}

类注册扩展了React.Component{
状态={角色：'学生'}；
renderInput=（{输入、标签、类型、占位符、元、角色}）=>{
返回(
{label}
{this.renderError（meta）}
)
};
render（）{
让角色=this.state.role；
返回(
{
this.setState（{role:'student'}）
}}>Ученик
{
this.setState（{role:'teacher'}）
}}>Учитель
)
}