一个TextInput的值在用户更改另一个的值时发生更改

Question

我创建了一个重量计算器，用户可以在其中输入以KG或LB为单位的重量，其他输入的值将自动更改。例如：用户输入KG输入100，LB接受值198。我试图给TextInputs的默认值输入，但它不起作用。有人能帮我吗？

Answer 1

如果我理解正确：您正在为KG和LB制作转换器，您有两个输入字段，当您更改第一个字段中的值时，您希望在第二个字段中显示结果(反之亦然(。如果你想更改输入字段中的值，你需要有受控的组件，这意味着你将用你的状态值设置值。

举个简短的例子(在ReactJS中，但概念相同(：

import React from "react";
export default class Converter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value1: 0,
      value2: 0
    };
  }
  onChangeValue1 = value1 => {
    this.setState({ value1: value1, value2: value1 * 2 });
  };
  onChangeValue2 = value2 => {
    this.setState({ value1: value2 / 2, value2: value2 });
  };
  render() {
    return (
      <div>
        <input
          value={this.state.value1}
          onChange={e => this.onChangeValue1(e.target.value)}
        />
        <input
          value={this.state.value2}
          onChange={e => this.onChangeValue2(e.target.value)}
        />
      </div>
    );
  }
}