Jak zaimplementować dynamiczną formę z kontrolowanymi komponentami w React.JS?

Question

Jak patrzę na przykładach w odniesieniu do controlled form componentsin react.js official website zastanawiam jak to jest jeden powinien wdrożyć form, w którym można byłoby w stanie remove i addinput elementów dynamicznie w taki sposób, że są one kontrolowane komponenty? Czy to możliwe?

W przykładach widzimy:

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

Ze względu na charakter mojej pracy, ja często znajduję się konieczności wdrożenia takich formularzy. Co więcej, nie mam bezpośrednich elementów od add lub removeinput - Zarządzam komponentami niestandardowymi, ale dla uproszczenia, tutaj proszę o podstawowe elementy formularza.

Answer 1

Jak dynamicznie można dodawać/usuwać elementy wejściowe?

Tak, jest to możliwe, można dodać/usunąć elementy dynamicallyinput, ale do tego trzeba zadbać o kilka rzeczy:

1- Prawidłowe wiązanie wydarzeń.

2- Tablica do przechowywania wartości każdego elementu wejściowego oddzielnie.

3- Gdy użytkownik wypełni wartość w dowolnym elemencie wejściowym, a następnie zaktualizuje tylko tę określoną wartość w stanie.

logicznych:

Utrzymanie tablicę wewnątrz państwa, która będzie przechowywać wartości. Użyj , aby utworzyć ui (element wejściowy) dla każdej wartości tablicy. podczas tworzenia pól, użyj usuń button z każdym polem i przekazaj indeks pola w tym function, pomoże ci to określić, które pole chcesz usunąć, wykonaj to samo również dla onChange.

Sprawdź ten przykład:

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'/>

Sprawdź pracuje jsfiddle: https://jsfiddle.net/mayankshukla5031/ezdxg224/

Answer 2

można łatwo wykorzystać swój stan lub rekwizyty, które przechodzą od innych składników zdecydować, co twój formularz powinien być.

Tu głupi przykład:

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

Zrobiłem to w sposobie renderowania prostu być jasne, ale cała logika może być przesuwany w funkcji pomocniczych.