javascript - 在 React 中手动添加 'Other' 选项时遇到问题。是什么赋予了？

Question

我的 React 组件的功能遇到了一个小问题，如下所示。具体来说，我希望用户能够(通过输入字段)输入民意调查类别(如果未在选择组件的选项下列出)。当用户选择“其他”选项时会发生这种情况，该选项呈现所述输入字段，如下所示。我遇到的问题是当用户开始输入新类别(触发 onChange 监听器)时，this.setState 导致“类别”不再是“其他”因此，输入字段不再呈现。因此，不可能进入另一个类别。下面是相关代码。

import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import { Button, Form, Grid, Header, Icon } from 'semantic-ui-react';

class NewPoll extends Component {
  state = {
    title: '',
    category: '',
    choice: '',
    choices: [],
  };

  onChange = e =>
    this.setState({
      [e.target.name]: e.target.value,
    });

  onSelect = e =>
    this.setState({
      category: e.target.value,
    });

  onAddChoice = e => {
    //...
  };

  onRemoveChoice = id => {
    //...   
  };

  onPollSubmit = e => {
    //...
  };

  render() {
    const { title, category, choices, choice } = this.state;
    const categories = [
      'Sport',
      'Travel & Tourism',
      'Education',
      'Technology',
      'Automotive',
      'Other',
    ];

    // Preview and edit poll before saving
    const shouldShowPreview = () => {
      if (title && choices.length > 0) return true;
      else return false;
    };

    return (
      <Fragment>
        <Grid.Row>
          <Grid.Column>
            <Header size="large" textAlign="center">
              Create New Poll
            </Header>
          </Grid.Column>
        </Grid.Row>
        <Grid.Row columns={shouldShowPreview() ? 2 : 1}>
          <Grid.Column>
            <Form style={styles.form} onSubmit={this.onPollSubmit}>
              <Form.Field>
                ...
              </Form.Field>

              <Form.Field
                placeholder="Category"
                label="Poll Category"
                control="select"
                value={category}
                onChange={this.onSelect}
              >
                <option disabled>Category</option>
                {categories.map((pollCategory, index) => (
                  <option value={pollCategory} key={index}>
                    {pollCategory}
                  </option>
                ))}
              </Form.Field>

              {category === 'Other' && (
                <Form.Field>
                  <label>If "Other"</label>
                  <input
                    name="category"
                    value={category}
                    placeholder="Enter category"
                    onChange={this.onChange}
                  />
                </Form.Field>
              )}
              <Form.Field>
                <label>Poll Choices</label>
                <div style={styles.choice}>
                  <input
                    name="choice"
                    value={choice}
                    placeholder="Enter poll choice"
                    onChange={this.onChange}
                  />
                  <Button className="add-choice" onClick={this.onAddChoice}>
                    <Icon style={styles.icon} name='add' size='large' />
                  </Button>
                </div>
              </Form.Field>
              <Form.Field control={Button} type="submit">
                Submit Poll
              </Form.Field>
            </Form>
          </Grid.Column>
        </Grid.Row>
      </Fragment>
    );
  }
}

NewPoll.propTypes = {
  addNewPoll: PropTypes.func.isRequired,
};

export default NewPoll;

Answer 1

导致此问题的原因是您使用相同的变量 - category 执行两件事:

1. 存储实际类别
2. 确定是否显示附加文本框

您有两个选择:

1. 创建一个不同的变量来显示附加文本框。例如，类似:

   const showCategoryTextBox = ...//whether category belongs in the categories list. 
   // and then use this to control the display of the textbox.
   

或者

修改您的条件，例如:

(category!== 'Sport' && category!=='Travel & Tourism' &&...)
// include all the values in your categories list except 'Other'