Reactjs - 从 event.target 中获取属性

Question

我有一个组件，用来渲染 Input type='select'（我使用reactstrap）。

import React, {Component} from 'react'
import {
    Form,
    FormGroup,
    Input,
    Button,
    Col,
} from 'reactstrap'
import {
    withRouter,
} from 'react-router'
import Context from '../../../../../provider'

class NewPost extends Component {
    constructor(props) {
        super(props)
        this.state = {
            subreddits: [],
            subreddit_selected: '',
            subreddit_id: 0,
            ...
        }
        this.handleSubredditSelect = this.handleSubredditSelect.bind(this)
    }

    componentDidMount() {
        fetch('/api/reddit/r/')
        .then(data => data.json())
        .then(json => {
            this.setState({
                subreddits: json,
                ...
            })
        })
    }

    handleSubredditSelect(event) {
        console.log('selected id: ',event.target.id)
        this.setState({
            subreddit_selected: event.target.value,
            subreddit_id: event.target.id,
        }, () => 
            this.props.history.push(`/${this.state.subreddit_selected}/new/`)
        )
    }

    ...

    render() {
        return (
            <Context.Consumer>
                {context => {
                    return (
                        <React.Fragment>
                            <Form
                                ...
                            >
                                <FormGroup row>
                                    <Col sm={7}>
                                        <Input 
                                            type="select"
                                            onChange={this.handleSubredditSelect}
                                            required
                                        > 
                                            <option key='0' disabled selected>Select an Option</option>
                                            {this.state.subreddits.map((subreddit) => {
                                                return (
                                                    <option key={subreddit.id} id={subreddit.id}>{'r/' + subreddit.name}</option>
                                                )
                                            })}
                                        </Input>
                                    </Col>
                                </FormGroup>
                                ...
                        </React.Fragment>
                        )
                    }}
                </Context.Consumer>
        )
    }
}

export default withRouter(NewPost)

所以，我有一个名为handleSubredditSelect的函数，它执行以下操作：

handleSubredditSelect(event) {  
    this.setState({
        subreddit_selected: event.target.value,
        subreddit_id: event.target.id,
    }, () => 
        this.props.history.push(`/${this.state.subreddit_selected}/new/`)
    )
}

在这个函数中，我无法获取event.target.id的任何值。

我也尝试了event.target.key，但它返回一个空字符串""。

我想将选定选项的ID设置为state中的subreddit_id。

- Sreekar Mouli

Answer 1

选择不起作用是因为<select>元素中的event.target返回整个带有选项的树形结构：

// result of event.target:
<select>
  <option id="id-1" value="some1">some1</option>
  <option id="id-2" value="some2">some2</option>
  <option id="id-3" value="some3">some3</option>
</select>

选择时需勾选其中一个选项。

---

如果要访问 select 中当前选项元素，您应该依赖于 selectedIndex 属性：

event.target[event.target.selectedIndex].id 

代码：

export default class SelectForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "some1",
      id: "id-1"
    };
  }

  handleChange = event => {
    console.log("event", event.target, event.target.selectedIndex);

    this.setState({
      value: event.target.value,
      id: event.target[event.target.selectedIndex].id
    });
  };

  render() {
    return (
      <div>
        <select value={this.state.sex} onChange={this.handleChange}>
          <option id="id-1" value="some1">some1</option>
          <option id="id-2" value="some2">some2</option>
          <option id="id-3" value="some3">some3</option>
        </select>
        ID: {this.state.id}
      </div>
    );
  }
}

- Xarvalus

---

console.log(event.target) 返回整个 select。那么，如何解决这个问题呢？如果我没记错的话，你放置的代码也面临着同样的问题！ - Sreekar Mouli

@SreekarMouli 是的，抱歉，在此期间我还在编写代码，请现在检查它，现在应该可以工作了 :) 使用 event.target[event.target.selectedIndex].id。 - Xarvalus

因此，要访问任何其他属性，我们只需执行 event.target[event.target.selectedIndex].attribute。 - Sreekar Mouli

Answer 2

您可以使用select的selectedIndex属性：

handleSubredditSelect(event) {  
    const selectedOption = event.target.childNodes[event.target.selectedIndex];
    this.setState({
        subreddit_selected: event.target.value,
        subreddit_id: selectedOption.id,
    }, () => 
        this.props.history.push(`/${this.state.subreddit_selected}/new/`)
    )
}

这里是沙盒: https://codesandbox.io/s/n5679m5owj

- Azamat Zorkanov

Answer 3

据我所知，event.target.id应该是有效的，在我的项目中也是这样做的。

但是它不应该是什么？

<Input 
type="select"
onChange={(e) => this.handleSubredditSelect}
required>`

?（方法名后不加括号）

- Lumpenstein

---

我认为应该是 onChange={this.handleSubredditChange} 或者 onChange={(e)=>this.handleSubredditChange(e)}。 - Sreekar Mouli

啊，对不起，弄错了 :) - Lumpenstein