react-querybuilder/react-querybuilder

After override valueEdit, I can't input continuously

hfmvin opened this issue · 6 comments

hfmvin commented

I suspect that after each input, handleOnchange caused valueEditor to rerender

const customEdit = (props) => {
return <input onChange={(e)=>props.handleOnChange(e.target.value)} value={props.value} />
}

const controlElements = {
valueEditor: customEdit
}

hfmvin commented

这几乎可以肯定与这个问题有关：https://react-querybuilder.js.org/docs/tips/common-mistakes#custom-component-as-closure

This solves the current problem.But in this case, my custom component cannot obtain the values passed by the parent component.

jakeboone02 commented

This solves the current problem. But in this case, my custom component cannot obtain the values passed by the parent component.

Can you be more specific? What values are not accessible? And as always, a working code sample demonstrating the issue is helpful.

hfmvin commented

这解决了当前的问题。但在这种情况下，我的自定义组件无法获取父组件传递的值。

你能说得更具体一点吗？哪些值不可访问？与往常一样，演示该问题的工作代码示例很有帮助。

For example, I want to pass options to the custom component to generate, which I can define internally，as follows. If I follow the above solution by defining the CustomiValueEditor outside of queryBuilder, I will not be able to obtain options. const queryBuilder = (options)=>{ //other stuff......... const CustomValueEditor= props => { return <select options={options}/> } return { <QueryBuilder fields={fields} query={query} handleOnChange={q => setQuery(q)} controlElements={{ valueEditor: CustomValueEditor, }} /> } }

jakeboone02 commented

I'm not sure this is the best solution, but you might try the context prop. You can put anything you want in that prop and it will be passed down to every component.

hfmvin commented

My problem has been solved. Thank you for your answer

  • 🎉1