在React中获取事件目标的兄弟姐妹价值的好方法是什么？

Question

function NewItem(props) {
    return (
        <div>
            <input
                id = "content"
                placeholder = "add a new item..."
            />
            <input
                id = "score"
                placeholder = "score(points per hour)"
            />
            <button
                onClick = {
                    (e) => props.onAddItem(e)
                }
            >
                add
            </button>
        </div>
    );
}

按钮单击处理程序在父类中实现，我想要做的是当我单击“添加”时，父类可以获取这两个输入的值，以便它可以在其“ itemList“状态。有没有一个好方法让我获得价值？我知道我可以操纵DOM这样做，但我想这不是一个好方法。

下面是单击处理程序和父类的render方法：

handleAddItem(e) {
    const newList = this.state.itemList;
    const itemCount = this.state.itemCount;
    newList.unshift({
        itemInfo: {
            content: ,
            score: ,
            time: ,
        }
        key: itemCount,
        index: itemCount,
    });
    this.setState({
        itemList: newList,
        itemCount: itemCount + 1,
    });
}


render() {
    return (
        <div id = "todo">
            <NewItem
                onAddItem = {
                    (e) => this.handleAddItem(e)
                }
            />
            <ItemList
                itemList = { this.state.itemList }
                onClick = {
                    (e) => this.handleDeleteItem(e)
                }
            />
        </div>
    )
}

Answer 1

我想要做的是当我点击“添加”时，父类可以获得这两个输入的值

一种解决方案是将输入包装在<form>中并将它们一起发送。

function NewItem(props) {
    return (
        <form onSubmit={props.onAddItem}>
            <input name="content"/>
            <input name="score"/>
            <button type="submit">add</button>
        </form>
    );
}

class Parent extends Component {
    handleAddItem(e) {
        e.preventDefault();
        const content = e.target.content.value;
        const score = e.target.score.value;
        // ...
    }
    render() {
        return (
            <NewItem onAddItem={this.handleAddItem}/>
        );
    }
}

Answer 2

您可能想查看参考文献或“参考”。我通常避免尝试使用它们，但有时它只是处理问题的一种更简洁的方法。

这是一个可能会帮助你的片段。

import React from 'react'

class TestComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      controlledValue: 'controlled'
    }

    this._handleControlledChange = this._handleControlledChange.bind(this)
  }

  _handleControlledChange(e) {
    this.setState({
      controlledValue: e.target.value
    })
  }

  render(){
    return (
            <div>
            {/* Bind this to 'this.field1' */}
            <h3>Function Binding</h3>
            <input ref={f => this.field1 = f} />
            {/* bind this to this.refs.field2 */}
            <h3>Bind to Refs</h3>
            <input ref='field2' />

            <h3>Controlled Component</h3>
            <input 
              value={this.state.controlledValue} 
              onChange={this._handleControlledChange}
            />

            <button 
              onClick = {
                e => {
                  let field1Value = this.field1.value
                  let field2Value = this.refs.field2.value

                  alert('Field 1 ' + field1Value + '\n Field 2 ' + field2Value + '\nConrolled: ' + this.state.controlledValue )
                } 
              }
            >
            Ref test
            </button>

          </div>
    )
  }
}

基本上发生了什么是我将组件绑定到类，所以我可以在以后引用它。通常，React代码将依赖于状态而不允许组件自行管理，但有时这是您想要的行为（一次性表单或您不想管理状态的行为）。

希望这会有所帮助。我演示了您可能想要控制组件的三种主要方式。查看https://material-ui.com/等项目以及更多示例的教程。

@ wdm的形式是一个聪明的解决方案，我没有使用过，但我喜欢它。