버튼이 양식이 된 후 제출시 버튼으로 돌아갑니다.

Question

React에서 프로그래밍을 시작하기 만하면 클릭 할 때 양식으로 변환 한 다음 제출시 버튼으로 돌아가고 싶습니다. 양식은 버튼으로 돌아 가지 않을 것입니다. 그렇지 않으면 로컬에서 제대로 작동하지만 jsfiddle에서 전혀 작동하지 않습니다.

여기 내 바이올린입니다 :

var nameList = []; 

var ClickMe = React.createClass({ 

    getInitialState: function() { 
     return { 
      text: "Add name" 
     }; 
    }, 

    handleClick: function() { 
     if (this.state.text == "Add Name") { 
      this.setState({ 
       text: "Save" 
      }); 
     } else { 
      this.setState({ 
       text: "Add Name" 
      }); 
     } 
    }, 

    handleChange: function(event) { 
     this.setState({ 
      value: event.target.value 
     }); 
    }, 

    handleSubmit(event) { 
     nameList.push(this.state.value); 
     console.log(nameList); 
     this.setState({ 
      text: "Add Name" 
     }); 
     event.preventDefault(); 
    }, 

    render: function() { 
     if (this.state.text == "Add Name") { 
      return (< 
       form onSubmit = { 
        this.handleSubmit 
       } > 
       < 
       label > 
       Name: 
       < 
       input type = "text" 
       value = { 
        this.state.value 
       } 
       onChange = { 
        this.handleChange 
       } 
       /> < 
       /label> < 
       input type = "submit" 
       value = "Submit"/> 
       < 
       /form> 
      ) 
     } else { 
      return (< 
       button onClick = { 
        this.handleClick 
       } 
       type = "button" > { 
        this.state.text 
       } < 
       /button> 
      ) 
     } 
    } 
}); 

ReactDOM.render(< 
    ClickMe/> , 
    document.getElementById("root") 
); 

https://jsfiddle.net/petterwr/11vwamuz/1/

Answer 1

논리에 잘못 몇 가지가 있습니다. 처음에는 텍스트를 "이름 추가"로 설정하여 버튼이 렌더링됩니다 ("이름 추가"와 같지 않음). 그런 다음 양식이 제출되면 텍스트를 "이름 추가"로 설정하여 단추로 되돌아 가지 않고 양식을 다시 렌더링합니다. 나는 당신의 예를 가지고 가고 당신이 상태를 처리하는 방식 변경 : 당신이 당신의 구성 요소를 필요로하는 경우

var nameList = []; 
var ClickMe = React.createClass({ 

    getInitialState: function() { 
     return { 
      enterName: false 
     }; 
    }, 

    handleClick: function() { 
     this.setState({ 
      enterName: true 
     }); 
    }, 

    handleChange: function(event){ 
     this.setState({value: event.target.value}); 
    }, 

    handleSubmit(event) { 
     nameList.push(this.state.value); 
     console.log(nameList); 
     this.setState({ 
      enterName: false 
     }); 
     event.preventDefault(); 
    }, 

    render: function() { 
     if(this.state.enterName){ 
      return (
       <form onSubmit={this.handleSubmit}> 
        <label> 
         Name: 
         <input type="text" value={this.state.value} onChange={this.handleChange} /> 
        </label> 
        <input type="submit" value="Submit" /> 
        </form> 
      ) 
     } else { 
      return (
       <button onClick={this.handleClick} type="button"> 
        Add Name 
       </button> 
      ) 
     }   
    } 
}); 

ReactDOM.render(
    <ClickMe />, 
    document.getElementById("root") 
); 

당신은 항상 텍스트보다는 true 또는 false을 사용할 수 있습니다.

Answer 2

안전한 jsfiddle URL (https)을 통해 안전하지 않은 스크립트 (http)를 가져 오는 것과 같습니다. 어쨌든, 내가 가진 더 나은 통합을 가진 다른 jsfiddle로 코드를 전송 반작용 :

jsfiddle 내가 바이올린 필요에 따라, 나는 생성자를 사용했다 의미 클래스 대신 createClass를 사용, 몇 가지 변화 . 또한 이벤트 처리기를 화살표 표기로 변경하여 this.state에 액세스하려고 시도하면 this이 클래스 인스턴스 자체를 가리 킵니다.

희망이 도움이됩니다.