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来做到这一点，但是我想这不是一个好方法。

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

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的表单是一个聪明的解决方案，我没有用过，但是我喜欢它。

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

2 个答案: