Как реализовать динамическую форму с управляемыми компонентами в React.JS?
Как я смотрю на примеры в ссылке для controlled form components на официальном сайте Reaction.js, мне интересно, как можно реализовать form в котором вы сможете remove а также addinput элементы динамически таким образом, что они являются контролируемыми компонентами? Это вообще возможно?
В примерах мы можем видеть:
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
Из-за характера моей работы мне часто приходится реализовывать такие формы. Более того, я не add или же removeinput элементы непосредственно - я управляю пользовательскими компонентами, но для простоты здесь я прошу базовые элементы формы.
7 ответов
Решение
Как добавление / удаление элементов ввода динамически возможно?
Да, это возможно, вы можете добавить / удалить input элементы dynamically Но для этого нужно позаботиться о нескольких вещах:
1- Правильная привязка событий.
2- Массив для хранения значений каждого элемента ввода отдельно.
3. Когда пользователь вводит значение в любой элемент ввода, то обновляет только это конкретное значение в состоянии.
Логика:
Поддерживать массив внутри состояния, в котором будут храниться значения. Используйте #array.map для создания пользовательского интерфейса (входного элемента) для каждого значения массива. при создании полей используйте удаление button с каждым полем, и передать индекс поля в этом function, это поможет вам определить, какое поле вы хотите удалить, сделать то же самое для onChange также.
Проверьте этот пример:
class App extends React.Component {
constructor(props) {
super(props);
this.state = { values: [] };
this.handleSubmit = this.handleSubmit.bind(this);
}
createUI(){
return this.state.values.map((el, i) =>
<div key={i}>
<input type="text" value={el||''} onChange={this.handleChange.bind(this, i)} />
<input type='button' value='remove' onClick={this.removeClick.bind(this, i)}/>
</div>
)
}
handleChange(i, event) {
let values = [...this.state.values];
values[i] = event.target.value;
this.setState({ values });
}
addClick(){
this.setState(prevState => ({ values: [...prevState.values, '']}))
}
removeClick(i){
let values = [...this.state.values];
values.splice(i,1);
this.setState({ values });
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.values.join(', '));
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
{this.createUI()}
<input type='button' value='add more' onClick={this.addClick.bind(this)}/>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(<App />, document.getElementById('container'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='container'/>Проверьте работу jsfiddle: https://jsfiddle.net/mayankshukla5031/ezdxg224/
Как динамически добавлять / удалять элементы ввода с помощью функциональных компонентов?
Тот же компонент из выбранного ответа рассмотрен и переписан как функциональный компонент.
import React from 'react';
import { useState } from 'react';
function DynamicInput() {
const [values, setValues] = useState({ val: []});
function createInputs() {
return values.val.map((el, i) =>
<div key={i}>
<input type="text" value={el||''} onChange={handleChange.bind(i)} />
<input type='button' value='remove' onClick={removeClick.bind(i)} />
</div>
);
}
function handleChange(event) {
let vals = [...values.val];
vals[this] = event.target.value;
setValues({ val: vals });
}
const addClick = () => {
setValues({ val: [...values.val, '']})
}
const removeClick = () => {
let vals = [...values.val];
vals.splice(this,1);
setValues({ val: vals });
}
const handleSubmit = event => {
alert('A name was submitted: ' + values.val.join(', '));
event.preventDefault();
}
return (
<form onSubmit={handleSubmit}>
{createInputs()}
<input type='button' value='add more' onClick={addClick} />
<input type="submit" value="Submit" />
</form>
);
}
export default DynamicInput;
Я считаю, что нашел гораздо более простой способ сделать это, используя хук useRef(). Вы просто сохраняете ссылку на форму с переменным количеством входных данных и используете кнопку для добавления и удаления входных данных. Затем при отправке вы используете функцию childNodes() для получения всех значений.
форма.js:
import React, { useState, useRef } from 'react'
const Form = () => {
const formRef = useRef(null)
const [numInputs, setNumInputs] = useState(1)
const submitHandler = () => {
let inputs = formRef.current.childNodes
for (let i = 0; i < numInputs; i++) {
console.log(inputs[i].value)
}
}
return (
<form ref={formRef}>
{Array.from(Array(numInputs)).map((_, i) => (
<input type="text" />
))}
</form>
<button onClick={() => setNumInputs(numInputs - 1)}>Remove input</button>
<button onClick={() => setNumInputs(numInputs + 1)}>Add input</button>
<button onClick={submitHandler}>Submit</button>
)
}
Если вы хотите использовать объект, потому что у вас много полей ввода, вы можете сделать это :
<input type="text" value={el.response} onChange={this.handleChange.bind(this, i)} id="response" a />
<input type='button' value='remove' onClick={this.removeClick.bind(this, i)}/>
</div>
)
}
handleChange (i,event) {
let values = [...this.state.values];
values[i][event.target.id] = event.target.value;
this.setState({ values });
}
addClick(){
this.setState(prevState => ({ values: [...prevState.values, {question: '',response: '',}]}))
}
removeClick(i){
let values = [...this.state.values];
values.splice(i,1);
this.setState({ values });
}
handleSubmit(event) {
event.preventDefault();
alert(this.state.values.map(objet=> "{"+ " " + "'question' :" + " " + objet.question + " " + "'response' :" + " " + objet.response +" " + "}") );
}
render() {
return (
<form onSubmit={this.handleSubmit}>
{this.createUI()}
<div className="d-flex justify-content-end">
<KamaminiButton onClick={this.addClick.bind(this)} text='Ajouter une autre question' />
</div>
<input type="submit" value="Submit" />
</form>
);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='container'/>
Вы можете легко использовать свое состояние или реквизиты, которые вы передаете от других компонентов, чтобы решить, какой должна быть ваша форма.
Вот тупой пример:
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
let myForm;
if(this.props.someprop == true){
myForm = (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange= {this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
else if(this.state.statevar == "expectedValue"){
myForm = (
// other HTML with embedded JS here
);
}
return (
{myForm}
);
}
}
Я сделал это в методе рендеринга просто для ясности, но всю логику можно перенести во вспомогательные функции.
import React, { Component, } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
var childJson = []
export default class AddInvoice extends Component {
constructor(props) {
super(props);
this.state = {
Json: [],
rows: [{}]
}
}
handleChange = idx => e => {
const { name, value } = e.target;
const rows = [...this.state.rows];
rows[idx] = { [name]: value };
this.setState({ rows });
console.log(`rows-->>${this.state.rows[idx].amount}`);
childJson.push(this.dynamicJson(this.state.rows, idx))
this.setState({ Json: childJson })
};
handleAddRow = () => {
const item = {
name: "",
mobile: "",
btn: ""
};
this.setState({
rows: [...this.state.rows, item]
});
};
handleRemoveRow = (idx) => {
this.state.rows.splice(idx, 1);
this.setState({ rows: this.state.rows });
};
dynamicJson(rows, index) {
return {
"service": rows[index].text,
"tax": rows[index].tax,
"amount": rows[index].amount
}
};
render() {
return (
<div className="ui one column grid">
<div className=" row">
<div className="one wide computer one wide tablet one wide mobile column">
</div>
<div className="fourteen wide computer fourteen wide tablet fourteen wide mobile column">
<h1 id="title_header">INVOICE-ADD NEW</h1>
</div>
<div className="one wide computer one wide tablet one wide mobile column">
</div>
</div>
<div className=" row">
<div className="one wide computer one wide tablet one wide mobile column">
</div>
<div className="fourteen wide computer fourteen wide tablet fourteen wide mobile column">
<div id="#cus_segment" className="ui segment" style={{ backgroundColor: '#f5f5f5' }}>
<div className="ui form">
<div className="ui stackable grid">
<div className="six wide column">
<div className="field">
<label>Invoice No</label>
<input type="text" name="invoiceno" placeholder="Invoice No" value={this.state.invoiceno} onChange={e => this.setState({ invoiceno: e.target.value })} />
</div>
</div>
<div className=" six wide column">
<div className="field">
<label>Customer</label>
<select className="ui fluid selection search dropdown" name="customer" value={this.state.customer} onChange={e => this.setState({ customer: e.target.value })}>
<option defaultValue="">select</option>
<option value="sohanpatil@gmail.com">sohanpatil@gmail.com</option>
<option value="mayurawati@gmail.co">mayurawati@gmail.com</option>
<option value="nasirpatel@gmail.com">nasirpatel@gmail.com</option>
<option value="nandkishorshinde@gmail.com">nandkishorshinde@gmail.com</option>
</select>
</div>
</div>
<div className="one row">
<div className="six wide column">
<div className="field">
<label>Invoice Date</label>
<div className="ui calendar" id="calender1">
<div className="ui input right icon">
<i className="calendar icon"></i>
<input type="text" placeholder="Invoice Date" value={this.state.invoicedate} onBlur={e => this.setState({ invoicedate: e.target.value })} />
</div>
</div>
</div>
</div>
<div className="six wide column">
<div className="field">
<label>Due Date</label>
<div className="ui calendar" id="calender2">
<div className="ui input right icon">
<i className="calendar icon"></i>
<input type="text" placeholder="Due Date" value={this.state.duedate} onBlur={e => this.setState({ duedate: e.target.value })} />
</div>
</div>
</div>
</div>
</div>
<div className="two row">
<div className="six wide column">
<div className="field">
<label>Header</label>
<input type="text" name="header" placeholder="Header" value={this.state.header} onChange={e => this.setState({ header: e.target.value })} />
</div>
</div>
<div className="six wide column">
<div className="field">
<label>Remark</label>
<input type="text" name="remark" placeholder="Remark" value={this.state.remark} onChange={e => this.setState({ remark: e.target.value })} />
</div>
</div>
</div>
<div className="three row">
<div className="ten wide column">
<button className="ui primary button" type="submit">Save</button>
<button className="ui button" type="submit">Clear</button>
<button className="ui button" type="submit">Cancel</button>
</div>
</div>
<div className="foure row">
<div className="one wide column">
<div className="field">
<h4 style={{ textAlign: "center", borderRadius: 2 }}>Action</h4>
</div>
</div>
<div className="two wide column" style={{ marginLeft: 55 }}>
<div className="field">
<h4 style={{ textAlign: "center", borderRadius: 2 }}>Text</h4>
</div>
</div>
<div className="three column" style={{ marginLeft: 200 }}>
<div className="field">
<h4 style={{ textAlign: "center", borderRadius: 2 }}>Tax</h4>
</div>
</div>
<div className="foure wide column" style={{ marginLeft: 190 }}>
<div className="field">
<h4 style={{ textAlign: "center", borderRadius: 2 }}>Amount</h4>
</div>
</div>
</div>
{this.state.rows.map((item, idx) => (
<div className="five row" id="addr0" key={idx} >
<div className="one wide column">
<div className="field">
<div className="ui icon" style={{ backgroundColor: "#f76060", color: "white", height: 35, width: 40, textAlign: "center", borderRadius: 2 }} onClick={() => this.handleRemoveRow(idx)}>
<i className="trash alternate icon" style={{ marginTop: 8 }}></i>
</div>
</div>
</div>
<div className="five wide column">
<div className="field">
<input type="text" name="text" placeholder="text" value={this.state.rows[idx].text} onChange={this.handleChange(idx)} />
</div>
</div>
<div className="three wide column">
<div className="field">
<select className="ui fluid selection search dropdown " name="tax" id="tax_dropdown" value={this.state.rows[idx].tax} onChange={this.handleChange.bind(this)}>
<option defaultValue="">Select</option>
<option value="STAX">STAX</option>
<option value="VAT">VAT</option>
</select>
</div>
</div>
<div className="three wide column">
<div className="field">
<input type="text" name="amount" placeholder="amount" value={this.state.rows[idx].amount} onChange={this.handleChange(idx)} />
</div>
</div>
</div>
))}
<div className="six row">
<div className="two wide column">
<div className="field">
<div className="ui icon" style={{ backgroundColor: "#c4d3d3", height: 35, width: 55, textAlign: "center", borderRadius: 2 }} onClick={this.handleAddRow}>
<i className="plus icon" style={{ marginTop: 8 }}></i>
<label>Add</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="one wide computer one wide tablet one wide mobile column">
</div>
</div>
</div>
);
}
}
//So, here's a simple trick i use to get this done:
//Using React Hook
const [data, setData] = useState({});
//the create an onInputChange function for the Inputs this way
const onInputChange = async e =>{
const {name, value} = e.target;
//check to validate if entry is not a number
if(isNaN(name)){
data[name] = value;
//somehow update data
setData({...data})
}
}