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，但是返回了空字符串“”。

我想将处于{strong>状态的subreddit_id设置为所选选项的 ID

Answer 1

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

// 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>
    );
  }
}

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

Answer 3

AFAIK event.target.id应该可以工作，在我的项目中也是如此。

但是不应该

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

？（方法名后没有括号）

React.js-从event.target中退出属性

3 个答案: