Question

我知道这个问题经常被问到，但是我在这里找到的大多数解决方案都不能解决我的问题。

以下代码显示使用reactjs的记录。现在，我在记录中添加了输入表单，以尝试编辑名称和性别，但是输入表单根本不可编辑。以下是我尝试过的。有人可以帮我处理数据

<b>Name</b>: <input type="text" className="form-control" name="name" value={obj.name}  onChange={this.handleChange} /><br />

<b>Gender</b>: <input type="text" className="form-control" name="gender" value={obj.gender}  onChange={this.handleChange} />


 handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }


    handleSubmit(event) {
        event.preventDefault();
//process your form submission here
}

这是主要代码

<!DOCTYPE html>
<html>
   <head>

   </head>
   <body>    
<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="build/browser.min.js"></script>
<script src="build/jquery.min.js"></script>
<div id="app"></div>

<script type="text/babel">

class Application extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);
 this.handleSubmit = this.handleSubmit.bind(this);

    this.state = {
      rec: [
        { name: "Tony", Age: "18" , gender: "male" },
        { name: "John", Age: "21" , gender: "female"},
        { name: "Luke", Age: "78" , gender: "male"},
        { name: "Mark", Age: "90" , gender: "female"},
        { name: "Jame", Age: "87" , gender: "female"},
        { name: "Franco", Age: "34" , gender: "male"},
        { name: "Franco", Age: "34" , gender: "male"},
        { name: "Biggard", Age: "19" , gender: "male"},
        { name: "tom", Age: "89" , gender: "female"}
      ],

gender: '',
name: '',

    };

  }


 handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }


    handleSubmit(event) {
        event.preventDefault();
}




  render() {
    return (
      <div >
        <div>
          <h3>Edit Records(Name and Age)</h3>





          <ul>
            {this.state.rec.map((obj, i) => (
              <li key={i}>
                {obj.name} - {obj.Age}  - {obj.gender} 

<br /><br />
<b>Name</b>: <input type="text" className="form-control" name="name" value={obj.name}  onChange={this.handleChange} /><br />

<b>Gender</b>: <input type="text" className="form-control" name="gender" value={obj.gender}  onChange={this.handleChange} />


              </li>
            ))}
          </ul>
        </div>

      </div>
    );
  }
}
ReactDOM.render(<Application />, document.getElementById('app'));


</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


   </body>
</html>

基于同类用户解决方案的更新部分

您好，Sir Kind User，您的解决方案确实不错，但是尽管页面现在可以输入数据，但仍然显示空白的名称和性别输入文本，尽管我现在可以输入数据了，但是显示黑色输入形式使记录的编辑非常困难，因为记录不是从输入中找到

这是屏幕截图，显示了页面加载时空的输入记录

到目前为止，这是基于用户解决方案/建议的实现

import React, { Component, Fragment } from "react";
import { render } from "react-dom";


import { Link } from 'react-router-dom';



class Application extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);
 this.handleSubmit = this.handleSubmit.bind(this);

    this.state = {
      rec: [
        { name: "Tony", Age: "18" , gender: "male" },
        { name: "John", Age: "21" , gender: "female"},
        { name: "Luke", Age: "78" , gender: "male"},
        { name: "Mark", Age: "90" , gender: "female"},
        { name: "Jame", Age: "87" , gender: "female"},
        { name: "Franco", Age: "34" , gender: "male"},
        { name: "Franco", Age: "34" , gender: "male"},
        { name: "Biggard", Age: "19" , gender: "male"},
        { name: "tom", Age: "89" , gender: "female"}
      ],

gender: '',
name: '',

    };

  }


handleChange = (name) => (event) => {
   this.setState({ [name]: event.target.value });
}

/*
 handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }
*/

    handleSubmit(event) {
        event.preventDefault();
}




  render() {
    return (
      <div >
        <div>
          <h3>Edit Records(Name and Age)</h3>





          <ul>
            {this.state.rec.map((obj, i) => (
              <li key={i}>
                {obj.name} - {obj.Age}  - {obj.gender} 

<br /><br />
<b>Name1</b>: <input type="text" className="form-control" name="name" value={this.state[obj.name]}  onChange={this.handleChange(obj.name)} /><br />

<b>Gender</b>: <input type="text" className="form-control" name="gender" value={this.state[obj.gender]}  onChange={this.handleChange(obj.gender)} />


              </li>
            ))}
          </ul>
        </div>

      </div>
    );
  }
}

Answer 1

您必须决定是否要控制input。目前，您无法更改input的值，因为已为其分配了静态值-value={obj.name}。

您的onChange处理程序是正确的，但是您必须将value的{{1}}从input更改为状态相关的动态值。

value={obj.name}

输入中的道具：

handleChange = (name) => (event) => {
   this.setState({ [name]: event.target.value });
}

和

onChange={this.handleChange(obj.name)}

名称和性别的Reactjs输入表单不可编辑

1 个答案: