Question

我在下面说明的React组件的功能方面遇到了一个小问题。具体来说，我希望用户能够输入（通过输入字段）轮询类别，如果未在select组件的选项下列出的话。当用户选择＆＃39;其他＆＃39;选项，呈现所述输入字段，如下所示。我遇到的问题是，当用户开始输入新类别（触发onChange听众）时，this.setState会导致类别＆＃39;不再是＆＃39;其他＆＃39;因此，不再呈现输入字段。因此，不可能进入另一类别。以下是相关代码。

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

导致此问题是因为您使用相同的变量 - PIPE来做两件事：

存储实际类别
确定是否显示其他文本框

您有两种选择：

创建另一个变量以显示其他文本框。例如，像：
```
category
```

OR

修改您的条件，如：

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

无法手动添加＆＃39;其他＆＃39; React中的选项。是什么赋予了？

1 个答案: