TextField DeSelected onChange - React

Question

我有一个呈现多个文本字段的组件。我的州包含有关组件中所有文本字段的信息。

我的州看起来像这样，

this.state.list = [
    {
        id: "some-string",
        name: "something"
    },
    {
        id: "some-other-string-id",
        name: "some name"
    }
]

处理函数看起来像这样，

public handleChange(event: any) {

    var index = this.state.list.findIndex((elem) => {
        return elem.id === event.target.id;
    });

    var state = this.state;
    state.list[index].name = event.target.value;

    this.setState(state);
}

渲染，

{this.state.list.map((list, i) => {
    <TextField
        id={list.id}
        value={list.name}
        onChange={this.handleChange}
    />
}

除了每次进行更改时取消选择文本字段外，它工作正常。我怎么能避免这种情况？

Answer 1

import React from "react";
import PropTypes from "prop-types";
import { TextField } from "material-ui";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      list: [
        {
          id: "some-string",
          name: "something"
        },
        {
          id: "some-other-string-id",
          name: "some name"
        }
      ]
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e, index) {
    const list = [...this.state.list];
    list[index].name = e.target.value;
    this.setState({ list });
  }

  render() {
    return (
      <div>
        {this.state.list.map((list, i) => (
          <TextField
            id={list.id}
            value={list.name}
            onChange={e => this.handleChange(e, i)}
          />
        ))}
      </div>
    );
  }
}

export default App;

Answer 2

   class TextFields extends Component {
   constructor() {
       super();
       this.state = {
           list: [
               {
                   id: "one",
                   name: "First Field"
               },
               {
                id: "two",
                name: "Second Field"
            },
            {
                id: "three",
                name: "Third Field"
            }
           ]
       }
       this.onChange = this.onChange.bind(this);
   }

   onChange(event) {
       var index = this.state.list.findIndex(elem => {
           return elem.id === event.target.id
       });

       var state = this.state;
       state.list[index].name = event.target.value;
       // not needed
       //state.list[index].autofocus = true;

       this.setState(state);
   }

   render () {
    return <div>{this.state.list.map((list, i) => {
        return <TextField 
        id={list.id}
        value={list.name}
        onChange={this.onChange}/>  
    })} </div>
   }
}

Answer 3

   class TextFields extends Component {
   constructor() {
       super();
       this.state = {
           list: [
               {
                   id: "one",
                   name: "First Field",
                   autofocus: false,
               },
               {
                id: "two",
                name: "Second Field",
                autofocus: false,
            },
            {
                id: "three",
                name: "Third Field"
            }
           ]
       }
       this.onChange = this.onChange.bind(this);
   }

   onChange(event) {
       var index = this.state.list.findIndex(elem => {
           return elem.id === event.target.id
       });

       var state = this.state;
       state.list[index].name = event.target.value;
       state.list[index].autofocus = true;

       this.setState(state);
   }

   render () {
    return <div>{this.state.list.map((list, i) => {
        return <TextField 
        id={list.id}
        value={list.name}
        onChange={this.onChange}/>  
    })} </div>
   }
}