Javascript 在React JS中，当其中一个输入字段发生更改时，如何从多个输入字段中获取值

我有一个数组[0.00,1.00,2.00,3.00]和4个输入字段来编辑数组中的每个数字。 现在每个数字都有一个onChange函数。如何使此代码更高效

class Form extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        value: [ 0.00, 1.00, 2.00, 3.00 ]
      };
    }
  
    field0 = (e) => {
        this.setState({ 
          'field0' : e.target.value,
        },() => {
          this.setState({ value: 
            [ 
              Number(this.state.field0), 
              Number(this.state.value.map(function(v){ return v.toFixed(2); })[1]), 
              Number(this.state.value.map(function(v){ return v.toFixed(2); })[2]), 
              Number(this.state.value.map(function(v){ return v.toFixed(2); })[3]),
            ]
          });
        });
      }
    
      field1 = (e) => {
        this.setState({ 
          'field1' : e.target.value,
        },() => {
          this.setState({ value: 
            [ 
              Number(this.state.value.map(function(v){ return v.toFixed(2); })[0]), 
              Number(this.state.field1), 
              Number(this.state.value.map(function(v){ return v.toFixed(2); })[2]), 
              Number(this.state.value.map(function(v){ return v.toFixed(2); })[3]),
            ]
          });
        });
      }
    
      field2 = (e) => {
        this.setState({ 
          'field2' : e.target.value,
        },() => {
          this.setState({ value: 
            [ 
              Number(this.state.value.map(function(v){ return v.toFixed(2); })[0]), 
              Number(this.state.value.map(function(v){ return v.toFixed(2); })[1]),
              Number(this.state.field2),  
              Number(this.state.value.map(function(v){ return v.toFixed(2); })[3]),
            ]
          });
        });
      }
    
      field3 = (e) => {
        this.setState({ 
          'field3' : e.target.value,
        },() => {
          this.setState({ value: 
            [ 
              Number(this.state.value.map(function(v){ return v.toFixed(2); })[0]), 
              Number(this.state.value.map(function(v){ return v.toFixed(2); })[1]),
              Number(this.state.value.map(function(v){ return v.toFixed(2); })[2]),
              Number(this.state.field3), 
            ]
          });
        });
      }
  
    render() {
      return (
        <div>
          <input name="field0" onChange={this.field0} value={this.state.value.map(function(v){ return v.toFixed(2); })[0]} /><br /> 
          <input name="field1" onChange={this.field1} value={this.state.value.map(function(v){ return v.toFixed(2); })[1]} /><br />  
          <input name="field2" onChange={this.field2} value={this.state.value.map(function(v){ return v.toFixed(2); })[2]} /><br />  
          <input name="field3" onChange={this.field3} value={this.state.value.map(function(v){ return v.toFixed(2); })[3]} />
         <p>
            {this.state.value.map(function(v){ return v.toFixed(2); })[0] + ', ' +
             this.state.value.map(function(v){ return v.toFixed(2); })[1] + ', ' +
             this.state.value.map(function(v){ return v.toFixed(2); })[2] + ', ' +
             this.state.value.map(function(v){ return v.toFixed(2); })[3]}
          </p>
        </div>
      );
    }
  }
  
  ReactDOM.render(<Form />, document.getElementById('root'));

---

您可以使用spread is操作符来构造数组，而不是使用map函数。您可以在这里看到它是如何工作的

您可以使用spread is操作符来构造数组，而不是使用map函数。您可以在这里看到它是如何工作的

您的代码不是很枯燥，请不要重复。这是可以改进的

对于使用要更新的数组元素的索引的所有输入，使用单个更改处理程序。 您可以将状态映射到输入以及映射和连接的 陈列 没有必要在每次更新后重新格式化状态，只要在呈现JSX时存储数据并进行格式化即可。 代码

演示 你的代码不是很枯燥，不要重复。这是可以改进的

对于使用要更新的数组元素的索引的所有输入，使用单个更改处理程序。 您可以将状态映射到输入以及映射和连接的 陈列 没有必要在每次更新后重新格式化状态，只要在呈现JSX时存储数据并进行格式化即可。 代码

演示

---

以下是更好的方法：

import React from "react";

class Form extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      value: [0.0, 1.0, 2.0, 3.0]
    };
  }

  changeHandler = (index) => (e) => {
    let { value } = this.state;
    value[index] = e.target.value;
    this.setState({ value });
  };

  render() {
    return (
      <div>
        {this.state.value.map((val, i) => (
          <div key={i}>
            <input
              type="text"
              onChange={this.changeHandler(i)}
              value={Number(val).toFixed(2)}
            />
            <br />
          </div>
        ))}

        <p>{this.state.value.map((v) => Number(v).toFixed(2)).join(", ")}</p>
      </div>
    );
  }
}

export default Form;

---

快乐编码：

以下是更好的方法：

import React from "react";

class Form extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      value: [0.0, 1.0, 2.0, 3.0]
    };
  }

  changeHandler = (index) => (e) => {
    let { value } = this.state;
    value[index] = e.target.value;
    this.setState({ value });
  };

  render() {
    return (
      <div>
        {this.state.value.map((val, i) => (
          <div key={i}>
            <input
              type="text"
              onChange={this.changeHandler(i)}
              value={Number(val).toFixed(2)}
            />
            <br />
          </div>
        ))}

        <p>{this.state.value.map((v) => Number(v).toFixed(2)).join(", ")}</p>
      </div>
    );
  }
}

export default Form;

---

快乐编码：

这将是一种更好的方法。但是，在您的想法中更改浮点输入会有一些问题

import React from "react";
import ReactDOM from "react-dom";

class Form extends React.Component {
  constructor(props) {
   super(props);
   this.state = {
     values: [0.0, 1.0, 2.0, 3.0]
   };
  }

changeValue(idx, value) {
  this.setState(prevState => ({
      values: prevState.values.map((v,i) => idx == i ? parseFloat(value) : v)
    }));
}

renderInputs() {
  const inputs = this.state.values.map((v, i) => {
    return (
      <div>
        <input
          name={"feild" + i}
          onChange={e => this.changeValue(i, e.target.value)}
          value={v.toFixed(2)}
        />
      </div>
    );
  });

  return inputs;
}

renderValues() {
  return this.state.values.map(v => v.toFixed(2)).join(", ");
}

render() {
  return (
    <div>
      {this.renderInputs()}
      <p>{this.renderValues()}</p>
    </div>
  );
}
}

ReactDOM.render(<Form />, document.getElementById("root"));

---

您可以在这里找到它

这将是一个更好的方法。但是，在您的想法中更改浮点输入会有一些问题

import React from "react";
import ReactDOM from "react-dom";

class Form extends React.Component {
  constructor(props) {
   super(props);
   this.state = {
     values: [0.0, 1.0, 2.0, 3.0]
   };
  }

changeValue(idx, value) {
  this.setState(prevState => ({
      values: prevState.values.map((v,i) => idx == i ? parseFloat(value) : v)
    }));
}

renderInputs() {
  const inputs = this.state.values.map((v, i) => {
    return (
      <div>
        <input
          name={"feild" + i}
          onChange={e => this.changeValue(i, e.target.value)}
          value={v.toFixed(2)}
        />
      </div>
    );
  });

  return inputs;
}

renderValues() {
  return this.state.values.map(v => v.toFixed(2)).join(", ");
}

render() {
  return (
    <div>
      {this.renderInputs()}
      <p>{this.renderValues()}</p>
    </div>
  );
}
}

ReactDOM.render(<Form />, document.getElementById("root"));

---

您可以在这里找到它

因为每个字段的方法基本相同，只是字段不同，您可以重构它以使用一种方法，只需将名称作为道具名称和值传递。至于数组的顺序，也许你也可以传递字段的索引，这样你就可以替换该特定索引处的项。检查我的回答，因为每个字段的方法基本相同，只是字段不同，你可以重构它，使用一个方法，只需传递名称作为属性名和值。至于数组的顺序，也许你也可以传递字段的索引，这样你就可以在特定的索引处替换项。检查我的回答。这种方法是最能引起我共鸣的方法。谢谢你的帮助！我的荣幸。不客气：@Jayjay注意到，你可以看到其他答案，以避免国家发生变异。这种方法是最能引起我共鸣的方法。谢谢你的帮助！我的荣幸。欢迎：@Jayjay注意，请查看其他答案以避免状态突变。