javascript 如何从React元素中获取“key”prop(在更改时)?

sirbozc5  于 2023-03-28  发布在  Java
关注(0)|答案(8)|浏览(290)

当选择onChange时,我想获取选项的值和键。
我知道我可以在onChangeOption函数中使用event.target.value获得选项的 * 值 * 简单性,但我如何获得key

<select onChange={this.onChangeOption} value={country}>
    {countryOptions.map((item, key) =>
        <option key={key} value={item.value}>
            {item.name}
        </option>
    )}
</select>
w9apscun

w9apscun1#

你需要在key中传递值作为一个不同的属性。
来自文档:
Keys作为React的提示,但它们不会传递给组件。如果你需要在组件中使用相同的值,请将其显式传递为具有不同名称的prop:
读取:https://reactjs.org/docs/lists-and-keys.html

pvcm50d1

pvcm50d12#

传递key作为一个prop显然是有效的,但是更快的方法是将key作为一个自定义属性包含在html中。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.onSelect = this.onSelect.bind(this);
  }
  onSelect(event) {
    const selectedIndex = event.target.options.selectedIndex;
        console.log(event.target.options[selectedIndex].getAttribute('data-key'));
  }

  render() {
    return ( 
      <div>
      <select onChange = {this.onSelect}>
       <option key="1" data-key="1">One</option> 
       <option key="2" data-key="2">Two</option>             </select> 
     </div>
    );
  }
}

ReactDOM.render( < App / > , document.getElementById('root'));
<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="root"></div>
vmjh9lq9

vmjh9lq93#

这样做的一个简单方法是:

const functionCall = (event) => {
    console.log(event.target.getAttribute('a-key'));
}

<button a-key={1} onClick={functionCall}>Press Me</button>

我放了onClick,但你可以使用任何事件。

z8dt9xmd

z8dt9xmd4#

你可以通过value传递任何东西,我想这解决了你的问题。

<select onChange={this.handleChange}>
        {this.state.countryOptions.map((item, key) =>
          <option key={key} 
            value={JSON.stringify({key, value:item.value})}>
            //passing index along with value
            {item.value}
          </option>
        )}
</select>

handleChange(e) {
    let obj = JSON.parse(e.target.value) 
   // gives object{ key:country index, value: country value}
  }
6uxekuva

6uxekuva5#

想象一下这样一个组件:

<Component data={[{id:'a23fjeZ', name="foo"}, ...]}`

它呈现一个输入列表,并获取一个data prop,它是一个集合(Array of Objects):

function Component ( props ){
    // cached handler per unique key. A self-invoked function with a "cache" object
    const onChange = (cache => param => {
        if( !cache[param] )
            cache[param] = e => 
                console.log(param, e.target.name, e.target.value)

        return cache[param];
    }
    )({});

    return props.data.map(item =>
        <input key={item.id} name={item.name} onChange={onChange(item.id)} />
    }

}

正如您所看到的,key没有被访问,而是被传递到一个currying function中,该currying function在内部处理缓存,以防止在重新呈现时“无休止”地创建函数。

mkshixfv

mkshixfv6#

我是一个初学者,已经和这个问题斗争了好几天了!现在,我很乐意和你分享我的最终答案!
这真的很简单-你所要做的就是声明一个匿名函数!对于你想检测它的键的项目的onClick!
例如

data.map((item) => (<div
className = "newItem" key = {item.id} onClick = {() = displayKey(item.id)}
>{item.value}</div>))

那么你的功能就可以是这样;将显示传入的任何“瓦尔”

const displayKey = (val) => {
    console.log(val)
}

我希望我能帮上忙!与一个问题作斗争可能是一个痛苦的屁股!亲切的问候。

vbopmzt1

vbopmzt17#

所以你确实需要将key作为prop传递给<option>,但是因为<select>是一个原生字段,并且在内部处理更改,所以要将该key值取回来有点困难。让我们一次开始一个问题,将prop传递给option可以像这样 Package option组件并使用index prop作为新的key prop一样简单。

const CustomOption = ({ value, children, index }) => (
    <option key={index} value={value}>{value}</option>
);

还要注意的是,我们正在创建一个自定义组件 Package 器,以将index prop从应用到<option />本身,因为react不喜欢dom元素上的未知prop。
现在,如果我们可以在选项中处理选定的事件,我们就可以完成了,但我们不能这样做。所以我们还需要进行自定义选择:

class CustomSelect extends React.Component {

    static propTypes = {
        value: PropTypes.object,
        onChange: PropTypes.func,
    }

    handleChanged = (e) => {
        const newValue = e.target.value;
        let newKey;

        // iterate through our children searching for the <CustomOption /> that was just selected
        React.children.forEach(this.children, (c) => {
            if (c.props && c.props.index && c.props.value === newValue) {
                newKey = c.props.key;
            }
        });

        this.props.onChange(e, newKey);
    }

    render() {
        return (
            <select value={this.props.value} onChange={this.handleChanged}>
                {this.props.children}
            </select>
        );
    }
}

它有两个props valueonChange。注意,我们拦截了change事件以找到索引(键),并将其作为第二个参数沿着给父元素。这不是很好,但我想不出另一种简单的方法来完成这一点,同时仍然使用原生<select>元素。
请注意,您需要替换<select><optoin>的用法以使用这些新类,并在选项上分配index属性和key属性。

kt06eoxx

kt06eoxx8#

这对我来说也很有效:

const element: JSX.Element = <div key="my-key" />

const key = element.key?.valueOf()

console.log(key) // prints "my-key"

相关问题