개체를 속성 값으로 하는 반응 선택 옵션

개체를 속성 값으로 하는 반응 선택 옵션

선택한 옵션을 변경하고 싶을 때 반응하는 데 문제가 있습니다.문제는 값이 객체이기 때문에 옵션 값 속성으로 전달할 수 없다는 것입니다.

다음 코드를 참조하십시오.

class Selector extends React.Component {
  contructor(props) {
    super(props)
    this.state = { obj: null }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(e) {
    this.setState({obj: e.target.value})
  }

  render() {
    <select onChange={handleChange}>
     {this.props.listOption.map((option, index) => 
       <option key={index} value={option.obj}>
         {option.name}
       </option>
     )}
    </select>
  }
}

그리고

<Selector option={[{name: "name", obj:{...}}, ...]}>

선택한 옵션의 값으로 구성 요소의 상태를 변경해야 합니다.상태가 바뀌었을 때 얻을 수 있는 것은"object Object"react가 javascript 객체를 final view 속성에 삽입할 수 없기 때문에 발생하는 현상이라고 생각합니다.내 말이 맞나?

게다가, 나는obj올바른 방법이 있을까요?

를 이용할 수 있습니다.index의options

class Selector extends React.Component {
  contructor(props) {
    super(props);
    this.state = { obj: null }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(e) {
    this.setState({obj: this.props.listOption[e.target.value].obj})
  }

  render() {
    <select onChange={handleChange}>
     {this.props.listOption.map((option, index) =>
       <option key={index} value={index}>
        {option.name}
       </option>
      )}
    </select>
  }
}

또한 obj in state를 constructor에서 null로 설정했습니다.올바른 방법이 있을까요?

저는 당신의 요구에 의존합니다.적어도 하나의 옵션을 선택한 상태로 표시하려면 , 다음의 방법으로 유지할 수 있습니다.null

개체를 JSON 문자열로 변환하고 값으로 전달합니다.

그리고 문자열을 핸들러의 개체로 다시 변환합니다.

handleChange(event) {
    let obj = JSON.parse(event.target.value); //object
  }

  render() {
    <select onChange={handleChange}>
     {this.props.listOption.map((option, index) => 
       <option key={index} 
         value={JSON.stringify(option)}> //pass object string as value
         {option.name}
       </option>
     )}
    </select>
  }

당신은 하나의 옵션만 선택하기를 원할 것입니다.따라서 가장 쉬운 방법은 선택 항목을 설정하는 것입니다.색인. construct를 사용할 때는 항상 값 유형을 고려하십시오.this.state = { 선택됨인덱스: 0}

이제 선택 항목을 지정했습니다.먼저 0과 같은 인덱스 개체입니다.

렌더링 방법에서는 인덱스를 확인할 수 있습니다.

{this.props.listOption.map((option, index) => {
    this.state.selectedIndex == index ? (
      <option key={index} value={option.obj} selected>option.name</option>
    ): (
      <option key={index} value={option.obj}>option.name</option>
    ))}

핸들 변경 시 setState를 e.target으로 변경합니다.열쇠.

구문 오류를 남겼을 수 있습니다...그래도 도움이 됐으면 좋겠다.

다음 코드를 사용해 보십시오.

import React from 'react';

class LocationDemo extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            searchLoc: undefined,
            selectedLoc: "",
            locs:[
                {"name" : "Kerala","districts":["Ernakulam", "Trivandrum"]},
                {"name" :"Tamil Nadu","districts" :["Palani","Tiruchi"]}
            ],
        };
        this.handleChangeLocation = this.handleChangeLocation.bind(this);
    }


    handleChangeLocation = (event) => {
        this.setState({ selectedLoc: event, searchLoc: event.target.value }
            , () => console.log("searchLoc", this.state.searchLoc));
    }

    render() {
        return (
            <select class="cls-location" id="id-location"
                onChange={this.handleChangeLocation}
                value={this.state.locs.find(obj => obj.value === this.state.selectedLoc)}
                required
            >
                {
                    this.state.locs.map(loc => {
                        return (
                            <option name={loc.name} value={JSON.stringify(loc)}>{loc.name}</option>
                        )
                    })
                }
            </select>

        );
    }
}

export default LocationDemo;

제 경우 옵션오브젝트도 필요했습니다(currentValue)는 init시에 선택됩니다.

에서 그 오브젝트를 검색하고 싶지 않다.this.props.listOption지수를 얻기 위해.

그래서 오브젝트를 인덱스로 대체하는 대신 커스텀 속성을 추가했습니다.data-index옵션을 선택합니다.

속성값data-index옵션의option를 사용하여 액세스 할 수 있습니다.option.dataset.index:

handleChange(e) {
  const selectedIndex = e.target.selectedOptions[0].dataset.index];
  this.setState({obj: this.props.listOption[selectedIndex].obj})
}

render() {
  <select value={currentValue} onChange={handleChange}>
    {this.props.listOption.map((option, index) =>
      <option key={index} value={option.obj} data-index={index}>
        {option.name}
      </option>
    )}
  </select>
}

이 코드는 여러 선택에 적응하는 데 어려움이 없어야 합니다.

언급URL : https://stackoverflow.com/questions/42564515/react-selecting-option-with-object-as-attribute-value