redux-form: передача _id в обработчик отправки вместе с formProps - PullRequest
Новая
       44

redux-form: передача _id в обработчик отправки вместе с formProps

0 голосов
/ 22 октября 2018

Я создаю кнопку редактирования для моего приложения CRUD.В этом компоненте каждый отдельный «рейтинг» сопоставляется с одним из этих компонентов.Компонент начинает отображать рейтинг как сохраненный в БД, но пользователи могут нажать кнопку редактирования, и он превращается в форму!(в конце концов, я получу начальные значения для заполнения полей формы данными, отображаемыми в альтернативной опции рендеринга).

Прямо сейчас для кнопки редактирования у меня есть собственный обработчик отправки, получающий отправленные данные из двух полей формы как «formProps».Однако, прежде чем передать их бэкэнд-API, я также должен выяснить, как привязать идентификатор или что-то к обработчику отправки.

Как видно из компонента, расположенного прямо под формой, весь этот дочерний компонент имеет доступ к необходимому, передаваемому от родителя, который может быть вызван как this.props.id.Есть ли способ связать this.props.id с formProps до того, как handleSubmit переместит все это в действия Redux? 

class Rating extends Component{
constructor(props){
    super(props);
    this.state = {
        formClass: "notShowing",
        ratingClass: "showing"
    }
  }

renderForm = () => {
this.state.formClass === "notShowing"
? this.setState({formClass: "showing", ratingClass: "notShowing"})
: this.setState({formClass: "notShowing", ratingClass: "showing"})
}

onSubmit = (formProps) => {
    console.log("this is what the submitHandler recieves;", formProps);
    this.props.editRating(formProps, () => {
      this.props.history.push('/userDashboard');
    });
  }

render() {
    const { handleSubmit, reset } = this.props;
    return (
        <div className="card darken-1" key={this.props._id}>
            <div className={this.state.formClass}>
                <form onSubmit={handleSubmit(this.onSubmit)}> 
                    <p>What are you rating?</p>
                    <fieldset>
                    <Field
                        name="title"
                        type="text"
                        component="input"
                        autoComplete="none"
                    />
                    <p>Add your rates!</p>
                    <Field
                        name="value"
                        type="number"
                        component="input"
                        autoComplete="none"
                    />
                    </fieldset>
                    <button onClick={this.renderForm} type="submit" className="teal btn-flat right white-text">Submit</button>
                </form>
                <button onClick={this.renderForm}>Cancel</button>
            </div>    
            <div className={this.state.ratingClass}>
                <div className="card-content">
                <span className="card-title">{this.props.title}</span>
                <p>{this.props.value}</p>
                <button onClick={this.renderForm}>Edit</button>
                <button onClick={() => this.props.deleteRating(this.props.id)}>Delete</button>
                </div >    
            </div>
        </div>
    );
  }
}

function mapStateToProps({ratings}) {
  return { ratings };
} 

export default compose(
  connect(mapStateToProps, actions),
  reduxForm({ form: 'editRating' })
)(Rating);

1 Ответ

0 голосов
/ 22 октября 2018

Вы можете использовать третий параметр функции handleSubmit. 

onSubmit = (values, _, props) => {
    console.log(values, props.id);
    ...
}
...
const { handleSubmit, reset } = this.props;
<form onSubmit={handleSubmit(this.onSubmit)} .../>

Ссылка: https://redux -form.com / 7.4.2 / docs / api / reduxform.md /# -кода-onsubmit-функция-кода optional-

...