Question

我试图在react组件内创建输入文本，然后我意识到这是一个不好的实践。因此，我进行了一些调查，找到了Controlled-Components，所以我认为这是我所需要的，但是看着我的Component我不知道如何创建它。

我没有extends Redux.Component，所以一位朋友建议我创建一个Component，但没有成功。

我正在尝试的是

在我的component

内部

 <input
        ...
      />
      {"  "}
      <input
        ...
      />
      <span>
        <myButton
          ...
          arguments={[document.getElementById("id1").value, document.getElementById("id2").value]}
        >
          [ send ]
        </myButton>{" "}
      </span>

但是我收到此错误：

给定的ID不能为空！嵌套异常是java.lang.IllegalArgumentException：给定的id不能为null！

编辑

在我拥有所有这些代码的组件上，我有以下代码：

 <myButton
          id={id}
          arguments={[intputStuff]}
        >

所以我的问题是，如果我按汤姆的指示去做，我在其他组件中没有ID。

所以应该在另一个组件中创建这个组件，然后获取输入文本的值并将其作为参数

Answer 1

从您的帖子中不清楚您到底要完成什么。

您似乎正在尝试使用2个文本输入和一个按钮来构建组件。

如果您希望按钮“提交”两个输入的值，则应执行以下操作：

class SomeComponent extends React.Component {

    constructor(props) {
        super(props)

        this.state = {
            value1: props.initialValue1,
            value2: props.initialValue2
        }
    }


    onChangeText = (event) => this.setState({ [event.target.name]: event.target.value })


    onClickSubmit = (event) => {
        let { onSubmit } = this.props
        if(typeof onSubmit !== 'function') return

        let { value1, value2 } = this.state
        return onSubmit([ value1, value2 ])
    }


    render() {
        let {
            initialValue1,
            initialValue2,
            onSubmit,
            className,
            ...props
        } = this.props

        let {
            value1,
            value2
        } = this.state

        return (
            <div className={`SomeComponent ${className}`} {...props}>
                <input value={value1} name="value1" onChange={this.onChangeText} />

                <input value={value2} name="value2" onChange={this.onChangeText} />

                <button onClick={this.onClickSubmit}>
                    Submit
                </button>
            </div>
        )
    }
}

一些注意事项：

此示例使用了一堆未来派的JS：解构，rest / spread，类属性，计算出的属性名称和箭头函数。每个功能都被用于特定目的，而不仅仅是因为它们很酷。如果您的环境不支持其中某些功能，则需要找到一种可解决一些其他限制的解决方法。
这不是受控组件，但确实包含2个受控输入。它使用“ initialValue”模式：拥有的组件提供了起始值，但是当用户键入每个字符时，并没有意识到窜漏。仅当单击按钮时，才向拥有组件通知新值。如果在提交当前值之前重新渲染所有者，则此模式可能会导致数据丢失。
通常，在使用React时，您要避免使用本机DOM方法访问或操纵元素。（当然，有很多例外。）要避免使用本机DOM方法的原因之一是组件生命周期方法可能在React渲染器实际更新DOM之前执行-因此document.getElementById('someid')可能返回{{1} }。

在React组件内输入文本

编辑

1 个答案: