Question

我有一个ReactJs函数，该函数显示一个简单的对话框，并用于更新父组件的值。该函数如下所示：

export function MyDialogue(props: IMyProps) {    
    var myValue = 0;

    return (
        <div style={style}>
            <label>Enter a number here: </label>
            <input type="text" value={myValue} />
            <button onClick={() => props.updateFunc(myValue)}>Update</button>
        </div>
    );        
}

我已经尝试了几种方法；例如，传入props.myValue，甚至将函数更改为类并传入this.state.myValue。在本示例以外的所有示例中，myValue仍保持与父类相同，在该版本中，始终0。

updateFunc只需在父类上调用setState，并通过它进行跟踪，就永远不会使用更改后的值对其进行调用。

我已经看过一些文档，这些文档说基本上可以处理onChange事件-这是使这项工作唯一的方法，还是有办法在React中实现数据绑定？

Answer 1

您需要将此组件更改为有状态组件

然后为您的文本框进行双向绑定，并使其与本地状态对话，然后使用该状态值更新父级组件。

export class MyDialogue extends React.Component<IMyProps, {}>{
    constructor() {
        super();
        this.state = {
            myValue: 0
        }
    }

    onChangeHandler = (event:any) =>{
      this.setState({myValue:event.target.value});
    }

    return (
        <div style={style}>
            <label>Enter a number here: </label>
            <input type="text" value={this.state.myValue} onChange={this.onChangeHandler}/>
            <button onClick={() => props.updateFunc(this.state.myValue)}>Update</button>
        </div>
    );        
}

Answer 2

只需通过props.value将您的输入绑定回父级状态即可；

MyDialogue.js

export function MyDialogue(props: IMyProps) {    
  return (
      <div style={style}>
        ...
        <input type="text" value={props.value} />
        ...
      </div>
  );        
}

Parent.js

....
render(){
   const { dialogueValue } = this.state;

   return <MyDialuge value={dialogueValue} updateFunc={this.handleUpdate} />

}

Answer 3

您正在使用不受控制的输入，因为您没有将输入的值保持在内部状态。解决方法是

不受控制：

export class MyDialogue extends React.Component<IMyProps, {}>{
    constructor() {
        super();
        this.input = React.createRef();
    }

    return (
        <div style={style}>
            <label>Enter a number here: </label>
            <input type="text" ref={this.input} />
            <button onClick={() => props.updateFunc(this.input.current.value)}>Update</button>
        </div>
    );        
}

受控制：

将myValue状态保留在父级中，并将其传递给子级。并在输入事件发生更改时调用父函数，该函数使用 setState ，
在MyDialogue中维护myValye状态，然后onClick将其传递给父级。

无法在ReactJS函数中更新值

3 个答案: