添加和刪​​除動態輸入字段

Question

我想要一個動態數量的輸入字段，並且也能夠將其刪除。 如果這只是客戶端，我可以這樣做，但是我是從服務器獲取數據，而問題是我沒有從服務器獲取ID，因此我需要能夠即時更改字段數用戶界面。

由於我還從服務器獲取了一些字段，因此手動添加的ID不再與＃項同步。

我該如何實現？

這是我的代碼

let _id = 0;

function guid() {
  function s4() {
    return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
  }
  return s4() + s4();
}

class Rules extends React.PureComponent {
  constructor(props, context) {
    super(props, context);
    this.state = {
      rules: {
        rule_regulations: {}
      },
      numberOfInput: []
    };
  }

  componentDidMount() {
    this.props.loadRules();
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.rules.size && nextProps.rules !== this.props.rules) {
      nextProps.rules
        .entrySeq()
        .map(([key, value]) => {
          this.setState(state => ({
            rules: {
              ...state.rules,
              rule_regulations: {
                ...state.rules.rule_regulations,
                [key]: value
              }
            },
            numberOfInput: [...state.numberOfInput, guid()]
          }));
        })
        .toArray();
    }
  }

  handleChange = e => {
    const { value, name } = e.target;
    this.setState({
      rules: {
        ...this.state.rules,
        rule_regulations: {
          ...this.state.rules.rule_regulations,
          [name]: value
        }
      }
    });
  };

  handleAddRules = e => {
    this.setState({
      numberOfInput: [...this.state.numberOfInput, guid()]
    });
  };

  handleRemoveRules = (e, num) => {
    e.preventDefault();
    this.setState({
      numberOfInput: this.state.numberOfInput.filter(input => input !== num)
    });
  };

  handleSave = e => {
    e.preventDefault();
    const obj = {
      rule_regulations: Object.values(this.state.rules.rule_regulations)
    };
    this.props.postRules(obj);
  };

  render() {
    const { numberOfInput } = this.state;
    return (
      <div className="basic-property">
        <span className="circleInputUi" onClick={this.handleAddRules}>
          +
        </span>
        <RulesInputContainer
          numberOfInput={numberOfInput}
          handleChange={this.handleChange}
          handleRemoveRules={this.handleRemoveRules}
          handleSave={this.handleSave}
          value={this.state.rules.rule_regulations}
        />
      </div>
    );
  }
}


const RulesInputContainer = props => {
  return (
    <div className="rules-input">
      {props.value &&
        Object.keys(props.value).map(key =>
          <RulesInput
            key={key}
            num={key}
            value={props.value}
            handleChange={props.handleChange}
            handleRemoveRules={props.handleRemoveRules}
          />
        )}
      <button className="button" onClick={props.handleSave}>
        Save
      </button>
    </div>
  );
};

export default RulesInputContainer;


const RulesInput = props => {
  return (
    <form className="form">
      <InputField
        label={`Rule ${props.num + 1}`}
        type="text"
        name={`${props.num}`}
        value={props.value[props.num] || ""}
        onChange={props.handleChange}
      />
      <Button onClick={e => props.handleRemoveRules(e, props.num)}>
        Remove
      </Button>
    </form>
  )
  }

我想與服務器數據和客戶端同步

Answer 1

您可以將服務器返回的數據存儲到組件state 。

componentDidMount() {
  this.loadRules();
}

loadRules() {
  let rules = this.props.loadRules();
  this.setState({rules});
}

您可以通過使用從服務器接收到的數據設置state來保持同步。

此外，它與您的問題無關。 由於RulesInputContainer和RulesInput是表示性組件，我認為您可以將它們組合為1個組件。