React에서 제출 된 양식 값을 얻으려면 어떻게해야합니까?

Question

여기, 내이 (가) 제출 '버튼을 클릭에

import React, { Component } from 'react'; 
import categories from './categories.json' 
import './content.css' 

export default class Content extends Component { 
    constructor(props) { 
     super(props) 
     this.state = { 
      searchText: '', 
      categories 
     } 
    } 

    render() { 
     return(
      <div className="content"> 
      <form className="searchform" onSubmit={this.search}> 
       <input type="text" name="keyword" id="searchbox" placeholder="Search String"></input> 
       <select name="categories" id="searchcategories"> 
       <option defaultValue="" defaultChecked>Select a category</option> 
       {this.state.categories.map(x => 
        <option key={x.value} value={x.value}>{x.name}</option> 
       )}</select> 
       <input type="submit" value ="Search" id="searchsubmit" /> 
      </form> 
      </div> 
     ) 
    } 

    search(e) { 
     console.log(e.target) 
     e.preventDefault(); 
    } 
} 

구성 요소

반응이라고됩니까 내 기능 search입니다. 그러나 제출 된 값을 얻으려면 어떻게해야합니까?

e.target

나에게 모든 형태의 DOM HTML을 제공 e.target.value은에 반응

Answer 1

undefined, 당신은 양식 구성 요소에 대한 두 가지 옵션이 있습니다 : (https://reactjs.org/docs/forms.html#controlled-components)이 자신의 가치에 의해 구성 요소 상태에 연결 한

제어 구성 요소를 그들의 값 prop를 상태 변수로 설정합니다. 이 시나리오에서는 구성 요소의 this.state를 사용하여 값을 검사 할 수 있습니다. 일반적으로이 ref={(input) => this.input = input}처럼 ... 인스턴스화 할 때

통제되지 않은 구성 요소는 (https://reactjs.org/docs/uncontrolled-components.html) 상위 구성 요소에 첨부 참조를 할 수 있습니다. 함수 search이 호출되면 값에 대한 참조 (예 : this.input.value)를 검사 할 수 있습니다.

Answer 2

이 경우 상태 변수를 사용해야합니다. 예를 들어, 텍스트가 변경 될 때마다 this.state.searchText를 요소와 동기화하십시오. 그런 다음 콜백 메커니즘을 다음과 같이 정의하십시오. -

onSubmit={()=>{ 
console.log('My searchBox's latest value is : ',this.state.searchText); 
}} 

기억하십시오 : 단방향 흐름을 따르십시오. 따라서 우리는 항상 소품이나 주에서 데이터를 가져오고 DOM 통과에 대해 작업 할 필요가 없습니다.