Question

我有两个React组件。值组件具有数据，该数据作为道具传递给数字组件。

class Values extends Component {
  constructor() {
    super();

    this.state = {
      values: [
        {
          name: "A",
          numbers: [
            {
              number: 30
            },
            {
              number: 40
            },
            {
              number: 50
            }
          ]
        },
        {
          name: "B",
          numbers: [
            {
              number: 20
            },
            {
              number: 30
            }
          ]
        }
      ]
    };
  }

  render() {
    const { values } = this.state;
    return (
      <div>
        {values.map(value => (
          <Numbers key={value.name} value={value} />
        ))}
      </div>
    );
  }
}

数字组件呈现两个选择下拉列表。我希望能够选择两个值并将总和存储在组件的状态中，当然，总和应该随着我选择其他值而改变。

class Numbers extends Component {
  constructor(props) {
    super(props);

    this.state = {
      sum: 0
    };
  }

  onChange = e => {};

  render() {
    const { value } = this.props;
    return (
      <div>
        <p>{value.name}</p>
        <select onChange={this.onChange}>
          {value.numbers.map(item => (
            <option value={item.number} key={item.number}>
              {item.number}
            </option>
          ))}
        </select>
      </div>
    );
  }
}

Answer 1

您可以具有类似dropdownValues的状态，该状态可以是字符串数组，并且onChange组件中应该有一个Values函数，并将此函数传递给Numbers组件。 Numbers组件应在onChange属性中发送值和索引作为参数。然后，可以在父组件数组dropdownValues中更新该组件的索引。然后，当我们有一个包含值的数组时，我们可以将它们求和。

Answer 2

您可以采取的行动是提升状态，并让您的Values组件在自己的状态内知道每个选择项所选择的数字。

class Values extends React.Component {
  constructor() {
    super();

    this.state = {
      values: [
        {
          name: "A",
          selected: 0, // The selected number for this select will be held in memory here
          numbers: [
            {
              number: 30
            },
            {
              number: 40
            },
            {
              number: 50
            }
          ]
        },
        {
          name: "B",
          selected: 0, // The selected number for this select will be held in memory here
          numbers: [
            {
              number: 20
            },
            {
              number: 30
            }
          ]
        }
      ]
    };
  }

  // Rest of your component
}

然后，您需要传递给Numbers组件的一种方式来修改Values的状态；例如，您可以传递一种方法，该方法将修改Values组件的状态。

class Values extends React.Component {
 // Code...

  // This will be passed down to Number component in the render method
  selectNumber = (name, number) => {
    this.setState({
      values: this.state.values.map((value => {
        if (value.name === name) {
          return {
            ...value,
            selected: number
          }
        }

        return value;
      }))
    })
  }

  render() {
    const { values } = this.state;
    return (
      <div>
        // WE PASS IT DOWN HERE
        {values.map(value => (
          <Numbers 
            key={value.name} 
            value={value}
            onSelect={(number) => this.selectNumber(value.name, number)}
            />
        ))}
        <h1>sum: {sum}</h1>
      </div>
    );
  }
}

最后，在您的Values渲染功能中，您需要对处于您的状态的每个选择的所有选择的数字求和并显示它们。

class Values extends React.Component {
  // Code ...

  render() {
    const { values } = this.state;
    const sum = values.reduce((acc, val) => acc + val.selected, 0) // We make the sum
    return (
      <div>
        {values.map(value => (
          <Numbers 
            key={value.name} 
            value={value}
            onSelect={(number) => this.selectNumber(value.name, number)}
            />
        ))}
        <h1>sum: {sum}</h1> {/* Display the sum */}
      </div>
    );
  }
}

Here's a working codepen I made by tweaking your code.

Answer 3

https://github.com/kaluogh/React-stackoverflow-54306140/tree/master/src 这是我的anser。这是我的anser。这是我的anser。这是我的anser。

从选择下拉列表添加值反应

3 个答案: