在React組件內輸入文本

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不能為null！ 嵌套異常是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>
        )
    }
}

一些注意事項：

1. 此示例使用了許多未來派的JS：解構，rest / spread，類屬性，計算出的屬性名稱和箭頭函數。 每個功能都被用於特定目的，而不僅僅是因為它們很酷。 如果您的環境不支持其中某些功能，則需要找到一種可解決一些其他限制的解決方法。

2. 這不是受控組件，但確實包含2個受控輸入。 它使用“ initialValue”模式：擁有的組件提供了起始值，但是當用戶鍵入每個字符時，並沒有意識到竄漏。 僅當單擊按鈕時，才向擁有組件通知新值。 如果在提交當前值之前重新渲染所有者，則此模式可能會導致數據丟失。

3. 通常，在使用React時，您要避免使用本機DOM方法訪問或操縱元素。 （當然，有很多例外。）要避免使用本機DOM方法的一個原因是，組件生命周期方法可能在React渲染器實際更新DOM之前執行-因此document.getElementById('someid')可能返回undefined 。