Я работаю над формой редактирования, которая появляется после нажатия на кнопку «Изменить» из списка. Значение конкретной записи, в которой я нажимаю кнопку «Изменить», находится у меня, но я не знаю, как заполнить эти значения после нажатия кнопки «Изменить». (С использованием приставной формы v8.3.1):
import React, {useEffect} from 'react'
import { Field, reduxForm } from 'redux-form'
import {connect} from 'react-redux';
import {streamFetchAction} from '../../actions';
import {editStreamAction} from '../../actions';
const validate = values => {
const errors = {};
const alphabetsOnly = /^[A-Za-z][A-Za-z\s]*$/;
console.log('values',values)
if (!values.title) {
} else if (!(alphabetsOnly.test(values.title))) {
errors.title = 'title should not contain number'
}
if (!values.description) {
errors.description = 'Description Required'
} else if (isNaN(Number(values.age))) {
errors.age = 'Must be a number'
}
return errors
}
const warn = values => {
const warnings = {}
if (values.age < 19) {
warnings.age = 'Hmm, you seem a bit young...'
}
return warnings
}
const renderField = ({
input,
label,
type,
value,
meta: { touched, error, warning }
}) => (
<div>
<label>{label}</label>
<div>
<input {...input} placeholder={label} type={type} value={value} />
{touched &&
((error && <span style={{color:'red'}}>{error}</span>) ||
(warning && <span>{warning}</span>))}
</div>
</div>
)
function EditStream(props){
const selectedId= Number(props.match.params.id)-1
const selectedListToEdit = props.streams[selectedId];
const selectedListToEdit_title = selectedListToEdit.title
const selectedListToEdit_desc = selectedListToEdit.description
console.log('props><',props)
useEffect(()=>{
props.streamFetchAction()
},[]);
const onSubmit =(e) =>{
console.log('e>>.',e)
}
const { pristine, reset, submitting } = props
return (
<form onSubmit={props.handleSubmit(onSubmit)}>
<Field
name="title"
type="text"
component={renderField}
label="Title"
/>
<Field name="description" type="text" component={renderField} label="Description" value={selectedListToEdit_desc}/>
<div>
<button type="submit" disabled={submitting}>
Submit
</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>
Clear Values
</button>
</div>
</form>
)
}
const mapStateToProps = ({form,streams}) =>{
console.log('edit state:',form)
//return state
return {editStreamForm:{}, ...form, streams }
}
const formWrap = reduxForm({form:"editStreamForm", validate})(EditStream)
// export default reduxForm({
// form: 'syncValidation', // a unique identifier for this form
// validate, // <--- validation function given to redux-form
// warn // <--- warning function given to redux-form
// })(EditStream)
export default connect(mapStateToProps, {streamFetchAction, RF_autoFill})(formWrap)
Здесь selectedListToEdit
содержит выбранный объект, который выглядит следующим образом:
{title:'abc', 'description:'xyz'}
Заранее спасибо.