Question

我有一个默认选项列表。用户可以选择添加所需的类别。我把它显示在一个对话框中。我现在如何动态添加它以使价值道具从数字4开始？这就是我所做的

class Registration extends React.PureComponent {
  constructor() {
    super();
    this.state = {
      open: false,
      type: '',
      platform: [],
    };

  }


  handleOpen = (type) => this.setState({ open:true, type });
  handleClose = () => this.setState({ open:false });

  addPlatform = (event) => this.setState({ platform: event.target.value});

  render() {
    const { type, platform} = this.state;
    const actions = [
      <FlatButton
        label="Cancel"
        primary
        onTouchTap={this.handleClose}
      />,
      <FlatButton
        label="Submit"
        primary
        onTouchTap={this.handleClose}
      />,
    ];
    return (
      <div className="registration">
        <Card>
          <Dialog
              title={`Add ${type}`}
              actions={actions}
              modal={false}
              open={this.state.open}
              onRequestClose={this.handleClose}
              >
              {type === 'category' ?
              <TextField
                type="text"
                hintText="Category Name"
                onChange={this.addCategory}
              /> :
              <TextField
                type="text"
                hintText="Platform Name"
                onChange={this.addPlatform}
              />
            }
          </Dialog>
          <SelectField
            value={this.state.valueOfCategory}
            onChange={this.handleCategoryChange}
            hintText="Category"
          >
            <MenuItem value={1} primaryText="Food" />
            <MenuItem value={2} primaryText="Travel" />
            <MenuItem value={3} primaryText="Communication" />
          </SelectField>
          <FloatingActionButton onTouchTap={() => this.handleOpen('category')}><ContentAdd /></FloatingActionButton>
          <RaisedButton label="Done" onClick={this.onSubmit} />
        </Card>
      </div>
    );
  }
}

export default Registration;

Answer 1

class Registration extends React.Component {
  constructor() {
    super();
    this.state = {
      open: false,
      type: '',
      platform: ["Food", "Travel", "Communication"],
    };

  }


  handleOpen = (type) => this.setState({ open:true, type });
  handleClose = () => this.setState({ open:false });

  addPlatform = (event) => this.setState({ platform: [...this.state.platform, event.target.value]});

  render() {
    const { type, platform} = this.state;
    const actions = [
      <FlatButton
        label="Cancel"
        primary
        onTouchTap={this.handleClose}
      />,
      <FlatButton
        label="Submit"
        primary
        onTouchTap={this.handleClose}
      />,
    ];
    return (
      <div className="registration">
        <Card>
          <Dialog
              title={`Add ${type}`}
              actions={actions}
              modal={false}
              open={this.state.open}
              onRequestClose={this.handleClose}
              >
              {type === 'category' ?
              <TextField
                type="text"
                hintText="Category Name"
                onChange={this.addCategory}
              /> :
              <TextField
                type="text"
                hintText="Platform Name"
                onChange={this.addPlatform}
              />
            }
          </Dialog>
          <SelectField
            value={this.state.valueOfCategory}
            onChange={this.handleCategoryChange}
            hintText="Category"
          >

            {
              platform.map((item, index) => <MenuItem value={index+1} primaryText={item} />)
            }

          </SelectField>
          <FloatingActionButton onTouchTap={() => this.handleOpen('category')}><ContentAdd /></FloatingActionButton>
          <RaisedButton label="Done" onClick={this.onSubmit} />
        </Card>
      </div>
    );
  }
}

export default Registration;

将用户输入的选项添加为MenuItem，然后选择

1 个答案: