Javascript 更新表单中的数据。保持可编辑状态。（使用Redux、sans Redux表单进行反应） 问题

我有一份名单。我想：

通过单击用户的名称选择要编辑的用户。 编辑该用户的信息，以便我可以单击“提交”按钮并更新列表。 如果我点击了另一个名字，我想切换到那个人的信息，而不必先故意关闭表单。 3点前一切正常。当我点击另一个人时，表单本身不会更新

我的代码 更新表单的更新组件：

const UpdateForm = ({ updatePerson, personToUpdate, handleInputChange }) => {

  let _name, _city, _age, _id;

  const submit = (e) => {
    e.preventDefault();

    updatePerson({
      name: _name.value,
      city: _city.value,
      age: _age.value,
      _id: _id.value
    });

  };

  return (
    <div>
      <form onSubmit={submit}>
        <h3>Update Person</h3>
        <label htmlFor="_id">Some Unique ID: </label>
        <input type="text" name="_id" ref={input => _id = input}  id="_id" defaultValue={personToUpdate._id} onChange={input => handleInputChange(personToUpdate)} required />
        <br />
        <label htmlFor="name">Name: </label>
        <input type="text" name="name" ref={input => _name = input} id="name" defaultValue={personToUpdate.name} onChange={input => handleInputChange(personToUpdate)} />
        <br />
        <label htmlFor="city">City: </label>
        <input type="text" name="city" ref={input => _city = input} id="city" defaultValue={personToUpdate.city} onChange={input => handleInputChange(personToUpdate)} />
        <br />
        <label htmlFor="age">Age: </label>
        <input type="text" name="age" ref={input => _age = input} id="age" defaultValue={personToUpdate.age} onChange={input => handleInputChange(personToUpdate)} />
        <br />
        <input type="submit" value="Submit" />
      </form>

    </div>
  );
};

export default UpdateForm;

我的初始状态文件的相关部分：

  form: {
    people: [
      {
        _id: "adfpnu64",
        name: "Johnny",
        city: "Bobville",
        age: 22
      },
      {
        _id: "adf2pnu6",
        name: "Renee",
        city: "Juro",
        age: 21
      },
      {
        _id: "ad3fpnu",
        name: "Lipstasch",
        city: "Bobville",
        age: 45
      }
    ],
    updatePersonPanel: false,
    personToUpdate: {
      _id: "",
      name: "",
      city: "",
      age: ""
    },
  }

迄今为止试图找到解决办法 我试图通过将form属性切换为value而不是defaultValue，使该组件成为一个完全受控的组件。当我这样做的时候，名称切换很好，但是表单变得不可更改且无用。 我的问题 几乎所有这类问题的解决方案都建议使用redux表单或supply。我想知道如何在不使用Redux表单或其他任何可能的情况下使用Redux实现这一点。有没有一种方法可以在不涉及生命周期方法的情况下解决此问题

目前的结论 现在，我决定让表单不受控制，并使用一些经典的JSDOM方法和生命周期方法来控制表单。不管出于什么原因，一旦我采用了一些答案建议，我的浏览器就耗尽了我的CPU并崩溃了，大概是因为存在某种无限循环。如果有人有进一步的建议，我将不胜感激。现在，我满足于此：

class UpdateForm extends Component {

  constructor(props){
    super(props);

    this.submit = this.submit.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.personToUpdate._id !== this.props.personToUpdate._id) {
      document.getElementById("name").value = nextProps.personToUpdate.name;
      document.getElementById("age").value = nextProps.personToUpdate.age;
      document.getElementById("city").value = nextProps.personToUpdate.city;
    }

  }

  submit(e) {
    e.preventDefault();

    this.props.updatePerson({
      name: document.getElementById("name").value,
      city: document.getElementById("city").value,
      age: document.getElementById("age").value,
      _id: this.props.personToUpdate._id
    });
  }

  render() {
    return (
      <div>
        <form onSubmit={this.submit}>
          <h3>Update Person</h3>
          Unique ID: {this.props.personToUpdate._id}
          <br />
          <label htmlFor="name">Name: </label>
          <input type="text" name="name" id="name" ref="name" defaultValue={this.props.personToUpdate.name} required />
          <br />
          <label htmlFor="city">City: </label>
          <input type="text" name="city" id="city" ref="city" defaultValue={this.props.personToUpdate.city} required />
          <br />
          <label htmlFor="age">Age: </label>
          <input type="text" name="age" id="age" ref="age" defaultValue={this.props.personToUpdate.age} required />
          <br />
          <input type="submit" value="Update" />
        </form>

      </div>
    );
  }
} // end class

export default UpdateForm;

---

我将很快探索redux表单，因为很明显，表单作为输入和输出是一项不稳定的业务。现在，我的小应用程序可以正常工作了。

是的，有，你走的是正确的道路。方法是使用value而不是defaultValue，但必须从状态中读取值，然后使用onChange处理程序修改状态

差不多

this.state = {inputText:''}

然后在输入字段中

<input value={this.state.inputText} onChange={this.handleChange}/>

<input value={this.props.inputText} onChange={this.props.handleChange}/>

请记住在构造函数中绑定handleChange事件，以便可以在输入字段的onChange属性中将其作为this.handleChange传递

像这样的

this.handleChange = this.handleChange.bind(this)

-这是关于它的官方文件

此外，如果您想在redux中执行此操作，同样的逻辑也适用于输入字段

<input value={this.state.inputText} onChange={this.handleChange}/>

<input value={this.props.inputText} onChange={this.props.handleChange}/>

因此，每次单击复选框时，currentPerson都会指向相应的索引

现在输入字段可以

<input value={this.props.people[this.state.currentPerson].name} onChange={this.handleChange.bind(this,'name')}/>

---

handleChange接受一个属性，因此您不必为每个输入字段编写单独的处理程序。newPeople基本上修改了当前索引this.state.currentPerson中的元素，这些元素来自这里使用的props ES6语法。如果你有疑问，一定要问。然后使用changePeople操作发送，该操作也被作为道具传递。

我觉得我以前尝试过所有这些，但我将采纳这些建议并真正确保。我会尽快报告的。你知道。。。this.props.inputText是否可以位于某个对象上，例如this.props.inputExObject.nameInput，或者该对象是否太深而无法响应差异？是的，可以。由于在创建复选框时人员是一个数组，因此可以从人员数组映射该复选框，以便在单击每个复选框时，使当前用户成为组件状态的一部分，并与数组的索引相等。然后它可能是这样的，现在随着索引的变化，输入中的值也在不断变化。handleChange可以分派操作，并将更改保留在redux状态中的原始人员。我将添加原始答案。进度！我今天学到的关于如何应用Function.prototype.bind的知识值100票。我让它工作，但是。。。如果我真的让它成为一个完全受控的组件，并为每次更改更新状态上的一个值，我会得到一个范围错误。它会无限循环地破坏浏览器窗口。我给出的代码示例会更新每次击键时的状态，我认为这并不是您想要的。为什么不将局部状态变量中的所有更改隐藏在组件中，并仅在按Submit时发送。如果有取消按钮，则使本地状态等于redux状态。通过这种方式，您将尽可能减少redux中的调度数量。但即便如此，也不应该出现射程误差。

<input value={this.props.inputText} onChange={this.props.handleChange}/>

this.props.people.map((person,index) => 
    return <Checkbox onClick={()=>this.setState(currentPerson:index)}/>
) 

<input value={this.props.people[this.state.currentPerson].name} onChange={this.handleChange.bind(this,'name')}/>

handleChange(property,event){
  const newPeople = [
                    ...this.props.people.slice(0, this.state.currentPerson),
                    Object.assign({}, this.props.people[this.state.currentPerson], {
                        [property]: event.target.value
                    }),
                    ...this.props.people.slice(this.state.currentPerson + 1)
                    ]

  this.props.changePeople(newPeople)

}