javascript - 在 React 组件中输入文本

Question

我试图在 react 组件内创建输入文本，然后我意识到这是一个糟糕的实践。所以我调查了一下，发现Controlled-Components ，所以我认为这就是我需要的，但是看着我的 Component 我不知道如何创建它。

我没有 extends Redux.Component 所以 friend 建议我创建一个 Component但未能成功。

我正在尝试的是:

在我的组件内

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

但我收到此错误:

The given id must not be null!; nested exception is java.lang.IllegalArgumentException: The given id must not be null!

编辑

在我拥有所有这些代码的组件上，我有这个:

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

所以我的问题是，如果我按照 Tom 的说法去做，我在其他组件中就没有 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>
        )
    }
}

一些注意事项:

1. 这个示例使用了一堆 future 派 JS:解构、rest/spread、类属性、计算属性名称和箭头函数。每个功能都被用于特定目的，而不仅仅是因为它们很酷。如果您的环境不支持其中某些功能，您需要找到一种解决方法来满足一些额外的限制。

2. 这不是受控组件，但它包含 2 个受控输入。它使用“initialValue”模式:所属组件提供起始值，但在用户键入每个字符时不知 Prop 体情况。仅当单击按钮时，所属组件才会收到新值的通知。如果在提交当前值之前重新呈现所有者，此模式可能会导致数据丢失。

3. 通常，在使用 React 时，您希望避免使用 native DOM 方法来访问或操作元素。 (当然，有很多异常(exception)。)您想要避免原生 DOM 方法的一个原因是组件生命周期方法可能会在 React 渲染器实际更新 DOM 之前执行 - 所以 document.getElementById('someid') 可能会返回未定义。