반응 신청. 제출 버튼은 실제 값이 아닌 "유형"만 반환합니다.

Question

이 응용 프로그램에서 새 동물 객체를 추가 할 수 있지만 console.log에서 핸들을 제출할 때 출력 결과를 볼 때 문자열을 반환합니다. "유형". 값 = '유형'> {타입} 하지만

handleSubmit(e) { 
    console.log(this.refs.type.value) 
    e.preventDefault() 
} 

render() { 
let typeOptions = this.props.types.map(type => { 
    return (<option key={type} value='type'>{type}</option>) 
}) 
return (
    <div> 
    <h3>Add an Animal</h3> 
    <form onSubmit={this.handleSubmit.bind(this)}> 
     <div> 
      <label>Species</label><br /> 
      <input type='text' ref='species' /> 
     </div> 
     <div> 
      <label>Type</label><br /> 
      <select ref="type" > 
       {typeOptions} 
      </select> 
     </div> 
     <input type='submit' value='submit' /> 
    </form> 
</div> 

Answer 1

를 제출 뭐죠 원하는 출력을 얻을 여기를 교체 할 것을 확신 메신저 : 필자는 동물 형식을 반환 내지도의 방법으로 버그를 좁혀

return (<option key={type} value='type'>{type}</option>) 
       ^^ 1  ^^ 2   ^^ 3 

1. 이 key 속성은 무엇인가? It does not exist in HTML. 없애 버려.
2. 여기를보세요. 값을 하드 코딩 된 문자열'type'으로 설정했습니다. 그러지 마. 변수를 사용하십시오.
3. 여기 변수를 사용했습니다. value 속성에도 같은 작업을 수행하십시오.