Question

我有一个尝试使输入文本字段可编辑的问题。

当前，我无法编辑输入文本字段的值，在这里我可以删除或向输入文本字段中的值添加新字符。

我已经在状态对象中静态设置了值，但是我还想从输入文本字段中编辑状态值。

如何编辑下面的代码以使值可编辑？

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

class Info extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "Jack Sparrow",
      age: "52",
      email: "jacksparrow52@gmail.com"
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    let newState = {...this.state};
      newState[e.target.name] = e.target.name
    this.setState({
      ...newState
    })
  }

  render() {

    return (
      <div>
        <input type="text" name="name" value={this.state.name} placeholder="Enter your name..." onChange={(e) => this.handleChange(e)} />
        <br /> <br />
        <input type="text" name="age" value={this.state.age} placeholder="Enter your age..." onChange={(e) => this.handleChange(e)} />
        <br /> <br />
        <input type="text" name="email" value={this.state.email} placeholder="Enter your email..." onChange={(e) => this.handleChange(e)} />
        <h3>Output states:</h3>
        <p id="name">Entered Name: {this.state.name}</p>
        <p id="age">Entered Age: {this.state.age}</p>
        <p id="email">Entered Email: {this.state.email}</p>
      </div>

    );
  }
}

render(<Info />, document.getElementById('root'));

Answer 1

您正在将状态设置为目标输入名称。修复此行

newState[e.target.name] = e.target.name

带有（通知e.target.value）

newState[e.target.name] = e.target.value

Answer 2

像这样更改输入字段，添加输入字段名称并绑定句柄在输入字段内部更改。现在，您不想在构造函数中绑定句柄Change。

<input type="text" name="name" value={this.state.name} placeholder="Enter your name..." onChange={this.handelChange.bind(this, 'name')} />

现在替换句柄更改功能，

     handelChange(field, event) {
    this.setState({
      [field]: event.target.value
    })
  }

如何使输入字段文本可编辑？

2 个答案: