React.JS에서 제어 된 구성 요소를 사용하여 동적 양식을 구현하는 방법은 무엇입니까? 내가 <code>controlled form components</code><a href="https://facebook.github.io/react/docs/forms.html#controlled-components" rel="noreferrer">in react.js official website</a>의 참조의 예제를 찾고으로

Question

, 나는 한 당신은 그들이 구성 요소를 제어하는 ​​방식으로 동적으로 remove 및 addinput 요소 수있을 것입니다있는 form을 구현하도록되어 얼마나 궁금? 이것은 가능한가?

이 예에서 우리는 볼 수 있습니다

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 적절한 바인딩을.

각 입력 요소의 값을 별도로 저장하는 배열.

3- 사용자가 입력 요소에서 값을 채우면 상태의 해당 특정 값만 업데이트 할 때.

로직 :

의 값을 저장하는 것, 주 내부 배열을 유지한다. 각 배열 값에 대해 ui (입력 요소)를 만들려면 #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}> 
 
    \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} 
    ); 
    } 
} 

난 그냥 명확하게하기 위해 렌더링 방법을했지만 모든 로직은 보조 기능으로 이동할 수 있습니다.