Question

所以我正在组织我的React项目，我正在创建一个表单，我想让用户能够单独编辑和发布表单中特定项目的值，或者选中一个允许他们使用的框。一次编辑多个字段，然后点击保存按钮加载整个表单。所以我知道我的父组件需要一个“isEditingAll”类型的状态，我的子组件（每个字段）必须显示它们自己的“isEditing”状态，以便它可以将其值保存为单个帖子。目前，我在孩子的渲染中有以下代码：

render(){
    return(
        <span className="displayList">
            {this.state.isEditing ? '' : <span className="clickMe" onClick={this.onClickEdit}>{this.state.displayText}</span>}
            {this.state.isEditing ? <span><input name="inputValue" className="inputValue" value={this.state.displayText} type="text" onKeyPress={this.handleKeyPress} onChange={this.onTextChanged}/></span> :''}
            {this.state.isEditing ? <button className="saveMe" onClick={this.onSaveEdit}>Save</button> :''}
        </span>
    )
}

这允许我在isEditing时查看值，并在isEditing时编辑值，并且有一个保存按钮。但是当有人检查父母的盒子时，我需要它来覆盖这个值。是添加从父状态传入的prop值的最佳选择isEditingAll prop将连接我的父isEditingAll吗？然后我可以在编辑整个表单时隐藏保存按钮。我只是担心我会给子组件增加很多复杂性。让我知道你的想法，如果我可能错过了这个逻辑的一些可能的选择？提前致谢。

Answer 1

没问题，如果需要，你可以这样做。 Reactjs是一个非常灵活的库，允许开发人员做很多疯狂的事情。

在这种情况下，我想象你可以做这样的事情。

MainForm.js

import React, { Component } from 'react';
import InputForm from './InputForm';

class MainForm extends Component {
    constructor(props) {
      super(props);
      this.state = {
        multipleChecked: false,
        fields: [{name: 'name', value: 'Alfred'}, {name: 'lastName', value: 'Smith'}],
      }
    }

    onMultipleClick(e) {
      this.setState({multipleChecked: e.target.checked});
    }

    onSaveIndividualEdit(name, value) {
      let fieldsChanged = this.state.fields;
      fieldsChanged.forEach(field => {
        if (name == field.name) {
          field.value = value;
          return true;
        }
      });
      this.setState({fields: fieldsChanged});
    }

    render() {
      return (
        <div>
          <input type="checkbox" onClick={this.onMultipleClick.bind(this)}>Multiple edit</input>
          {this.state.fields.map(field =>
            <InputForm editingMultiple={this.state.multipleChecked} name={field.name} value={field.value} onSaveIndividualEdit={this.onSaveIndividualEdit.bind(this)} />
          )}
        </div>
      );
    }
}

export default MainForm;

InputForm.js

import React, { Component, PropTypes } from 'react';

class InputForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isEditing: false,
      editingMultiple: false,
      displayText: ''
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps !== undefined) {
      if (nextProps['value'] !== undefined) {
        this.setState({displayText: nextProps.value});
      }
      if (nextProps['isEditing'] !== undefined) {
        this.setState({isEditing: nextProps.isEditing});
      }
      if (nextProps['editingMultiple'] !== undefined) {
        this.setState({editingMultiple: nextProps.editingMultiple});
      }
    }
  }

  onTextChanged(e) {
    this.setState({displayText: e.target.value});
  }

  onClickEdit() {
    this.setState({isEditing: true});
  }

  onSaveEdit() {
    this.props.onSaveEdit(this.props.name, this.state.displayText);
    this.setState({isEditing: false});
  }

  render() {
    return (
      <div>
        <span className="displayList">
            {this.state.isEditing ? '' : <span className="clickMe" onClick={() => this.onClickEdit()}>{this.state.displayText}</span>}
            {this.state.isEditing ? <span><input type="text" onChange={this.onTextChanged.bind(this)} value={this.state.displayText}/></span> :''}
            {this.state.isEditing && !this.state.editingMultiple ? <button type="button" onClick={() => this.onSaveEdit()}>Save</button> :''}
        </span>
      </div>
    );
  }
}

InputForm.propTypes = {
  name: PropTypes.string,
  value: PropTypes.string,
  editingMultiple: PropTypes.bool,
  onSaveEdit: PropTypes.func
};

export default InputForm;

我希望它可以帮助你让你继续前进！

此致

Renan的

使用Child和Parent状态值显示Div

1 个答案: