Как реализовать динамическую форму с контролируемыми компонентами в React.JS?

Question

Как я смотрю на примерах в ссылке на controlled form componentsin react.js official website, мне интересно, как один предполагается реализовать 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 элементов непосредственно - я управляю настраиваемыми компонентами, но для простоты здесь я прошу элементы базовой формы.

Answer 1

Как можно добавлять/удалять элементы ввода?

Да, возможно, вы можете добавить/удалить input элементы dynamically, но для этого вам нужно позаботиться о нескольких вещах:

1- Правильное связывание событий.

2- Массив для хранения значений каждого входного элемента отдельно.

3- Когда пользователь заполняет значение в любом элементе ввода, а затем обновляет только это конкретное значение в состоянии.

Логика:

Ведение массива внутри государства, который будет хранить значения. Используйте #array.map, чтобы создать ui (элемент ввода) для каждого значения массива. при создании полей используйте поле 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}> 
 
    \t  <input type="text" value={el||''} onChange={this.handleChange.bind(this, i)} /> 
 
    \t  <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/

Answer 2

Вы можете легко использовать свое состояние или реквизит, которые вы передаете от других компонентов, чтобы решить, что ваша форма должна быть.

Вот тупой пример:

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} 
    ); 
    } 
} 

Я сделал это в методе визуализации просто быть ясно, но вся логика может быть перемещена во вспомогательных функциях.