Моделирование динамических форм как компонента React
Как моделировать динамические формы как компонент React?
Например, я хочу создать форму, показанную на изображении ниже:
- Как я могу смоделировать это как компонент React?
- Как я могу добавить динамичности этому компоненту? Например, нажатие кнопки «+ Добавить» создает еще одно пустое текстовое поле и помещает его прямо под другими уже обработанными текстовыми полями (как показано на изображении ниже).
Может ли кто-нибудь помочь мне с кодом для формы ниже?
Ответы 3
В тегах я вижу redux, поэтому могу предложить redux-form. Здесь у вас есть пример динамических форм с redux-form.
Я могу помочь вам в упрощенном режиме
import React , {Component} from 'react'
import { connect }from 'react-redux'
class main extends Component{
render(){
return(
<div>
<BaselineMath/>
<Algorithms />
</div>
)
}
}
const mapStateToProps = ({}) => {
return{}
}
export default connect (mapStateToProps,{})(main)
class BaselineMath extends Component{
constructor(props){
super(props);
this.state = {rows:[1]}
}
_getRows{
return this.state.rows.map((res,key)=>{
return <input placeholder = "etc..."/>
})
}
onClickAdd(){
let rows = this.state.rows
rows.push(1)
this.setState({
rows
})
}
render(){
return(
<div>
<Button onClick = {this.onClickAdd.bind(this)}>ADD row</Button>
{this._getRows()}
</div>
)
}
}
export default (BaselineMath)
class Algorithms extends Component{
constructor(props){
super(props);
this.state = {rows:[1]}
}
_getRows{
return this.state.rows.map((res,key)=>{
return <input placeholder = "etc..."/>
})
}
onClickAdd(){
let rows = this.state.rows
rows.push(1)
this.setState({
rows
})
}
render(){
return(
<div>
<Button onClick = {this.onClickAdd.bind(this)}>ADD row</Button>
{this._getRows()}
</div>
)
}
}
export default (Algorithms)
вы можете сделать алгоритм с чем угодно
Я думаю, что это полезный способ для статических полей, вы можете делать это динамически, также перебирая массив и связываясь друг с другом компонентом.
Разница в том, что помимо состояния значений формы, нам также необходимо обрабатывать состояние формы / структуры.
Если вы визуализируете входные данные путем обхода некоторого объекта состояния, который представляет форму формы, то новый ввод является просто новой записью в этом объекте состояния. Вы можете легко добавлять или удалять поля ввода в форме, управляя этим объектом состояния. Например. вы можете написать что-то вроде этого (код псевдо-реакции):
// inputs state of math and algorithms
const state = { math: [obj1, obj2], algorithms: [obj1, obj2] } // obj ~= {id, value}
// render math inputs
const mathMarkup = state.math.map(obj => <input value = {obj.value} onChange = {...} />)
// add handler for math field
const addMath = () => setState(prevState => ({ math: [...prevState.math, newObj]}))
Вот пример такой формы - коды. Это не на 100% как на вашем экране, но идея должна быть понятной. Поскольку к вашей форме есть некоторые неясные требования, я реализовал только первые два раздела, так что вы можете понять идею. Причем, стилей нет
Кроме того, вы можете извлекать методы renderXyz для разделения компонентов и улучшать форму состояния в соответствии со своими потребностями.
Разве это не слишком жесткое кодирование и дублирование кода?